Question

如何使用dataTables实例化表不加载数据（服务器模式），然后在我点击按钮时加载数据。如果serverSide在初始化时设置为true，表将自动发送ajax请求，然后呈现数据，这不是我想要的！:(

Answer 1

在类似的情况下，我就是这样做的。

         <script>
                $(function ($) {
                    $("#tbl").DataTable({columns:[{data:"id"}, {data:"text"}], dom: "tB", buttons: [{ text: "Load Me", action: function (e, dt, node, config) { loadme(e, dt, node, config); } }] });
                }
                );

                // // parameters are passed from the datatable button event handler
                function loadme(e, dt, node, config) {
                    parms = JSON.stringify({ parm1: "one", parm2: "two" });

                    $.ajax({
                        // my test web server that returns an array of {id:"code field", text:"country namee"}
                        url: "WebService1.asmx/GetAList",
                        data: JSON.stringify({ s: parms }),
                        type: 'post',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        // this is just away of passing arguments to the success handler
                        context:{dt:dt, node:node},

                        success: function (data, status) {

                            var contries = JSON.parse(data.d);
                            for (var i = 0; i < contries.length; i++){
                                this.dt.row.add(contries[i], "id", "text");
                                this.dt.draw();
                            }
                        },
                        error: function (one, two) {
                            debugger;
                        }
                    });

                }


            </script>
        </head>
        <body>
            <div style="width:500px">
                <table id="tbl">
                    <thead>
                        <tr>
                            <th>Code</th>
                            <th>Contru</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot></tfoot>
                </table>
            </div>
        </body>

Answer 2

在查看源代码半天后，我终于找到了解决方案。首先，我需要一个名为firstAjax的自定义参数，并将其设置为false。像这样：

$("#example").DataTable({
    serverSide: true,
    ajax: {
        url: 'your url'
    },
    firstAjax: false
});

然后我改变了

_fnReDraw (settings);  //in datatables.js line 4717

到

if (settings.oInit.firstAjax) {
         _ fnReDraw (settings);
     }

如果压缩了js文件（datatables.min.js），你应该找到_fnReDraw函数对应的别名。

Answer 3

初始化时，你应该在DataTables参数中使用“iDeferLoading”：0：

var table =  $("#table").dataTable({
  "bProcessing": true,
  "bServerSide": true,
  "iDeferLoading": 0,
  "sAjaxSource": service_url,
  "sServerMethod": "POST",
  ...
  ...

（或“deferLoading”：0表示较新的DataTables版本，1.10及以上版本），然后将事件添加到按钮：

$("#button").on("click", function (event) {
   $('#table').dataTable().fnDraw();
});

https://datatables.net/examples/server_side/defer_loading.html

Answer 4

我在初始化中找到了解决方案，使用“oLanguage”：

$('.table').dataTable({
  oLanguage: {
     sUrl: ""
  }
});

Answer 5

萨拉姆。

在使用ajax初始化Table A A1 int A2 varchar A3 varchar A4 varchar Table B B1 varchar B2 varchar B3 varchar B4 varchar Select 1 From A Left Join B ON Case When A.A1 Is Not NULL Then A.A1 = B.B1 When A.A4 Is Not Null Then A.A4 = B.B4 When A.A3 Is Not Null Then A.A3 = B.B3 and A.A4 IS NULL When A.A2 Is Not Null Then A.A2 = B.B2 and A.A3 IS NULL AND A.A4 IS NULL之后，使用以下简单代码行调用ajax获取数据：

datatables

此代码可能不适用于旧版本的$('#table').DataTable().ajax.reload();。

下载最新版本：https://datatables.net/download

DataTables在初始化

5 个答案: