Datatable jQuery + Ajax + PHP无法获取表中的数据(服务器端处理)

Studio Moretto

我正在根据此示例https://datatables.net/examples/data_sources/server_side.html使用数据表

所以我的表是:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="tabellaGlossario">
    <thead>
        <th>
             <td>Voce</td>
             <td>Sinonimi</td>
             <td>Sigla</td>
             <td>Macrosettore</td>
             <td>Microsettore</td>      
             <td>Sinonimi</td>
             <td>Sigla</td>
             <td>Macrosettore</td>
             <td>Microsettore</td>           
        </th>
    </thead>
    <tfoot>
        <th>
             <td>Voce</td>
             <td>Sinonimi</td>
             <td>Sigla</td>
             <td>Macrosettore</td>
             <td>Microsettore</td>      
             <td>Sinonimi</td>
             <td>Sigla</td>
             <td>Macrosettore</td>
             <td>Microsettore</td>           
        </th>
    </tfoot>
</table>

我的js:

oTable = $('#tabellaGlossario').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "sDom": '<""f>t<"F"lp>',
        "processing": true,
        "serverSide": true,
        "ajax": "Modules/Glossario/View/Glossario.Table.View.php?lingua_select=2",
    });

我的ajax返回:

{
  "draw": 1,
  "recordsTotal": 1,
  "recordsFiltered": 1,
  "data": [
    [
      "1",
      "2",
      "1",
      "1",
      "1",
      "Parola italiana",
      "Sinonimo italiano",
      "Sigla ita",
      "Note ita"
    ]
  ]
}

我的问题是,我总是得到“表中没有可用数据”作为表结果。但是正如您所看到的,ajax有一些结果(在此示例中为1)。看来我的代码与官方示例中的代码相同。

无法理解为什么数据未显示在表格中(我在浏览器控制台中也没有出现错误)。

马特奥·迪赛蒂(Matteo Disetti)

您使用的是动态加载还是任何路由?例如angularjs ngroute或某些框架的。

在这种情况下,它将无法正常工作(不是您正在做的那样)。您可以按照以下指南此类示例进行操作http://jsfiddle.net/qu4a7j24/3/

<div ng-app='testTableApp'>

    <div class="container">
        <div ng-controller="mainTable">
            <form action="" method="POST" class="form-horizontal" role="form">
                <div class="form-group">
                    <legend>Filters</legend>
                </div>
                <div class="form-group">
                    <div class="col-sm-10 col-sm-offset-2">
                        <input type="text" value="0" ng-change='reloadData()' ng-model="start">
                        <input type="text" value="50" ng-change='reloadData()' ng-model="end">

                    </div>
                </div>
            </form>

            <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-bordered"></table>
        </div>
    </div>
</div>

var testTableApp = angular.module( 'testTableApp', ['ngRoute', 'ngResource', 'datatables', 'datatables.tabletools', 'datatables.bootstrap', 'datatables.fixedheader'] );
console.log( testTableApp );
testTableApp.controller("mainTable", 
[ '$scope', 'DTOptionsBuilder', 'DTColumnBuilder',
    function ( $scope, DTOptionsBuilder, DTColumnBuilder){
        $scope.dataSource = "http://dt.ishraf.com/ajax.php";
        $scope.start = 0;
        $scope.end = 5000;


        $scope.getDataSource = function(obj,prefix){
            var src = $scope.dataSource;

            var str = [];
            for(var p in obj) {
                if (obj.hasOwnProperty(p)) {
                    var k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
                    str.push(typeof v == "object" ?
                    serialize(v, k) :
                    encodeURIComponent(k) + "=" + encodeURIComponent(v));
                }
            }
            return src + "?" + str.join("&");
        }

        var dsParams = {
            start : $scope.start,
            end : $scope.end
        }

        $scope.dsString = $scope.getDataSource( dsParams );


        $scope.buildTable = function(){
            return DTOptionsBuilder
                .newOptions()
                .withOption('ajax', {
                    // Either you specify the AjaxDataProp here
                    dataSrc: 'data',
                    url: $scope.dsString,
                    type: 'POST'
                }).
                withOption( 'lengthMenu', [
                    [10, 20, 50, 100, 150, 300, 500],
                    [10, 20, 50, 100, 150, 300, 500]
                ])                
                .withTableTools('bower_components/datatables-tabletools/swf/copy_csv_xls_pdf.swf')
                .withTableToolsButtons([
                    {
                        "sExtends": "copy",
                        "sButtonText": "<i class='fa fa-copy'></i>&nbsp;|&nbsp;Copy",
                        "fnInit": function (nButton, oConfig) {
                            $(nButton).addClass('btn btn-success');
                        }
                    },
                    {
                        "sExtends": "print",
                        "sButtonText": "<i class='fa fa-print'></i>&nbsp;|&nbsp;Print",
                        "fnInit": function (nButton, oConfig) {
                            $(nButton).addClass('btn btn-danger');
                        }
                    },
                    {
                        "sExtends": "csv",
                        "sButtonText": "<i class='fa fa-file-o'></i>&nbsp;|&nbsp;CSV",
                        "fnInit": function (nButton, oConfig) {
                            $(nButton).addClass('btn btn-primary');
                        }
                    },
                    {
                        "sExtends": "pdf",
                        "sButtonText": "<i class='fa fa-file-pdf-o'></i>&nbsp;|&nbsp;PDF",
                        "fnInit": function (nButton, oConfig) {
                            $(nButton).addClass('btn btn-warning');
                        }
                    }
                ])
                .withFixedHeader({
                    bottom: true
                })
                .withDOM('<"clear"><"#top.hidden-print"<".row"<".col-md-6"i><".col-md-6"f>><".row"<".col-md-6"l><".col-md-6"p>><"clear">T>rt')
                ;            
        }


        $scope.dtOptions = $scope.buildTable();

        $scope.buildColumns = function(){
            return [
                DTColumnBuilder.newColumn('id').withTitle('ID'),
                DTColumnBuilder.newColumn('firstName').withTitle('First name'),
                DTColumnBuilder.newColumn('lastName').withTitle('Last name'),
                DTColumnBuilder.newColumn('city').withTitle('city'),
                DTColumnBuilder.newColumn('state').withTitle('state'),
                DTColumnBuilder.newColumn('zip').withTitle('zip'),
                DTColumnBuilder.newColumn('country').withTitle('country'),
                DTColumnBuilder.newColumn('phone').withTitle('phone'),
                DTColumnBuilder.newColumn('email').withTitle('email')
            ];
        }

        $scope.dtColumns = $scope.buildColumns();


        $scope.reloadData = reloadData;
        $scope.dtInstance = {};

        function reloadData() {
            var resetPaging = false;
            $scope.dtInstance.reloadData(callback, resetPaging);
        }

        function callback(json) {
            console.log(json);
        }

    }
]);

或只是动态创建表(.load jquery可能有用)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

为什么不允许在jquery datatable服务器端处理ajax中使用成功?

来自分类Dev

jQuery DataTable和MVC服务器端处理

来自分类Dev

大型数据集的JSON序列化时的jQuery DataTable服务器端处理错误

来自分类Dev

如何从服务器端的jQuery Ajax检索“数据”?

来自分类Dev

jQuery datatable从ajax获取json数据

来自分类Dev

jQuery DataTable + sAjaxSource + Spring(服务器端处理)处理

来自分类Dev

jQuery ajax post不将数据发送到服务器端(使用PHP)

来自分类Dev

jQuery ajax post不将数据发送到服务器端(使用PHP)

来自分类Dev

jQuery dataTable 排序与 ajax 加载的数据

来自分类Dev

在MVC中使用jQuery数据表服务器端处理。序列化条件表单并将此参数添加到$ ajax.post方法

来自分类Dev

jQuery DataTable服务器端添加行无法正常工作

来自分类Dev

jQuery DataTable服务器端添加行无法正常工作

来自分类Dev

使用Datatable Ajax服务器端处理时,请遵循外部过滤条件导出CSV / PDF

来自分类Dev

在服务器端使用带有PHP的JQuery Ajax提交文件和文本数据。

来自分类Dev

在服务器端使用带有PHP的JQuery Ajax提交文件和文本数据。

来自分类Dev

jQuery Ajax不调用服务器端功能

来自分类Dev

DataTable的服务器端处理

来自分类Dev

使用 DataTable 服务器端脚本在第二次单击按钮时无法调用 ajax

来自分类Dev

jQuery / Ajax表单-服务器端php却收到跨域警告

来自分类Dev

PHP/JQuery/AJAX 表单 - 仅使用内联错误样式进行服务器端验证

来自分类Dev

使用来自Ajax的参数调用php函数(DataTable jQuery)

来自分类Dev

如何使用 Jquery 在 Ajax 调用中调用 Mvc 服务器端验证

来自分类Dev

使用MVC将多个值传递给服务器端Datatable Jquery中的一个按钮

来自分类Dev

如果文本内容单引号,jQuery dataTable 服务器端搜索不起作用

来自分类Dev

如何从数据表中的服务器端jquery数据表获取图像src值?

来自分类Dev

.net MVC的jquery数据表服务器端处理

来自分类Dev

如何使用Flask处理从jquery数据表发送的服务器端参数?

来自分类Dev

用于 jquery 数据表的服务器端处理的 Spinner

来自分类Dev

jQuery数据表-无法使用PHP访问服务器端自定义参数,fnServerParams,POST方法

Related 相关文章

  1. 1

    为什么不允许在jquery datatable服务器端处理ajax中使用成功?

  2. 2

    jQuery DataTable和MVC服务器端处理

  3. 3

    大型数据集的JSON序列化时的jQuery DataTable服务器端处理错误

  4. 4

    如何从服务器端的jQuery Ajax检索“数据”?

  5. 5

    jQuery datatable从ajax获取json数据

  6. 6

    jQuery DataTable + sAjaxSource + Spring(服务器端处理)处理

  7. 7

    jQuery ajax post不将数据发送到服务器端(使用PHP)

  8. 8

    jQuery ajax post不将数据发送到服务器端(使用PHP)

  9. 9

    jQuery dataTable 排序与 ajax 加载的数据

  10. 10

    在MVC中使用jQuery数据表服务器端处理。序列化条件表单并将此参数添加到$ ajax.post方法

  11. 11

    jQuery DataTable服务器端添加行无法正常工作

  12. 12

    jQuery DataTable服务器端添加行无法正常工作

  13. 13

    使用Datatable Ajax服务器端处理时,请遵循外部过滤条件导出CSV / PDF

  14. 14

    在服务器端使用带有PHP的JQuery Ajax提交文件和文本数据。

  15. 15

    在服务器端使用带有PHP的JQuery Ajax提交文件和文本数据。

  16. 16

    jQuery Ajax不调用服务器端功能

  17. 17

    DataTable的服务器端处理

  18. 18

    使用 DataTable 服务器端脚本在第二次单击按钮时无法调用 ajax

  19. 19

    jQuery / Ajax表单-服务器端php却收到跨域警告

  20. 20

    PHP/JQuery/AJAX 表单 - 仅使用内联错误样式进行服务器端验证

  21. 21

    使用来自Ajax的参数调用php函数(DataTable jQuery)

  22. 22

    如何使用 Jquery 在 Ajax 调用中调用 Mvc 服务器端验证

  23. 23

    使用MVC将多个值传递给服务器端Datatable Jquery中的一个按钮

  24. 24

    如果文本内容单引号,jQuery dataTable 服务器端搜索不起作用

  25. 25

    如何从数据表中的服务器端jquery数据表获取图像src值?

  26. 26

    .net MVC的jquery数据表服务器端处理

  27. 27

    如何使用Flask处理从jquery数据表发送的服务器端参数?

  28. 28

    用于 jquery 数据表的服务器端处理的 Spinner

  29. 29

    jQuery数据表-无法使用PHP访问服务器端自定义参数,fnServerParams,POST方法

热门标签

归档