Datatable jquery服务器端仅适用于加载页面

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Datatable jquery服务器端仅适用于加载页面相关的知识,希望对你有一定的参考价值。

我搜索所有网络,即谷歌,数据表文档,数据表..但没有找到解决方案。我使用Symfony 4并按照此文本,https://datatables.net/examples/server_side/simple.htmlhttps://datatables.net/manual/server-side。然后我的代码是:

  <html>
<table id="datatable" class="table table-striped table-bordered dataTable no-footer" role="grid" aria-describedby="datatable_info">
                              <thead>
                              <tr class="headings">
                                  <th></th>
                                  <th class="column-title">N&uacute;mero/Ano</th>
                                  <th class="column-title">Cadastrado em</th>
                              </tr>
                              </thead>
                              <tbody>
                              </tbody>
                          </table>
  <script>
  var table = $('#datatable').DataTable( {
                "serverSide": true,
                "info": true,
                "stateSave": true,
                "ajax":{
                    "url":"/decreto/filter",
                    "type": "GET"
                },
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Portuguese-Brasil.json"
                },
                "lengthMenu": [ 5, 10, 15, 25 ],
                "columns": [
                    {
                        "className":      'details-control',
                        "orderable":      false,
                        "data":           null,
                        "defaultContent": ''
                    },
                    {
                        "data": "number",
                        "render": function ( data, type, row ) {
                            var z = "";
                            data = data.toString();
                            for (;(4-data.length)>z.length;z = z.concat("0"));

                            return  z+data+"/"+row.year;
                        },
                    },
                    {
                        "data":"registry.date",
                        "render": function ( data ) {
                            var dMy = data.split(" ")[0].split("-");
                            var time = data.split(" ")[1].split(".")[0];

                            return dMy[2]+"/"+dMy[1]+"/"+dMy[0]+" "+time;
                        },
                    },
],
              //*/
              "order": [[1, 'asc']]
            } );
</script>

我的控制器返回:

    $source = $request->query->get("search")["value"];
    $rows = $request->query->get("length");
....
return new JsonResponse(
        array(
            'draw'=>intval(1),
            'recordsTotal'=>intval($em->total()["total"]),
            'recordsFiltered'=>intval(count($list)),
            'data'=>$list,
        )
    );

当页面第一次加载时,这个工作正常,只返回我定义的5行。但如果我尝试过滤,不要工作。对于调试发送的内容,我在Symfony中更改方法,切换GET for Post,并返回带有URL的错误:

    jquery.min.js:4 GET http://localhost:8000/decreto/filter?draw=1&columns%5B0%5D%5Bdata%5D=&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=false&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=number&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=registry.date&columns%5B2%5D%5Bname%5D=&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=files&columns%5B3%5D%5Bname%5D=&columns%5B3%5D%5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=4&columns%5B4%5D%5Bname%5D=&columns%5B4%5D%5Bsearchable%5D=true&columns%5B4%5D%5Borderable%5D=true&columns%5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=1&order%5B0%5D%5Bdir%5D=asc&start=0&length=5&search%5Bvalue%5D=el&search%5Bregex%5D=false&_=1520304436769 405 (Method Not Allowed)

然后我修复了方法来过滤发送的请求,发送:

DecretoController.php on line 194:
array:7 [▼
  "draw" => "1"
  "columns" => array:5 [▶]
  "order" => array:1 [▼
    0 => array:2 [▶]
  ]
  "start" => "0"
  "length" => "5"
  "search" => array:2 [▼
      "value" => "el"
      "regex" => "false"
   ]
  "_" => "1520302968156"
  ]

内容就像是说https://datatables.net/manual/server-side。哦,就在那时,继续说上面的网站,我的控制器返回:

DecretoController.php on line 224:
array:4 [▼
  "draw" => 1
  "recordsTotal" => 6
  "recordsFiltered" => 1
  "data" => array:1 [▼
    0 => array:13 [▶]
  ]
]

数据有1个元素,与i查找匹配。在那之前,好!罚款,完成在这里。使jsonResponse更改为:

{"draw":1,"recordsTotal":6,"recordsFiltered":1,"data":
[{"id":"XYgrQvzrYrYY","number":2,"year":2018,"publish":{"date":"2018-01-11 00:00:00.000000","timezone_type":3,"timezone":"UTC"},"created":{"date":"2018-01-02 00:00:00.000000","timezone_type":3,"timezone":"UTC"},"description":"asfasfasdfasdfsadfsadfsd (admitido pelo sdfasdf), o sr. sfasdfasfas.","registry":{"date":"2018-03-02 02:04:22.000000","timezone_type":3,"timezone":"UTC"},"active":1,"user_id":1,"user_first_name":"Eu,"unidade_id":7,"unidade_name":"Co do Municu00edpio","files":[]}]}

怎么了? - 在第一页加载确定 - 搜索正常 - 按文档顺序返回

我用https://code.jquery.com/jquery-1.12.4.js

谢谢 .. :(

答案

因为你有固定的绘制值,它应该是每个请求的序列。

交代:

第一次加载。 datatables请求draw = 1。 php return draw = 1。这很好用。

如果你做任何动作(排序,搜索,过滤等)。 datatables将请求draw = 2。 php return draw = 1。错误发生了。因为请求绘制与响应绘制不匹配

尝试将'draw'=>intval(1),改为'draw'=>intval($_GET['draw']),

以上是关于Datatable jquery服务器端仅适用于加载页面的主要内容,如果未能解决你的问题,请参考以下文章

jquery datatable 未将宽度应用于表

在 jQuery Datatable 中创建 html 链接

jQuery datatable c# 服务器端默认排序列给出null

在 JQuery Datatable 中选择另一个页面后如何重绘 Datatable?

无法通过服务器端处理显示 jQuery Datatable 的数据

jquery dataTable search的值后台怎么接收