Question

我正在使用JQuery DataTable并在过滤和排序服务器端数据时面临问题。它首次在页面加载时工作正常，但下次当我尝试对数据进行排序或过滤时，它不会重新绘制行。

我调试了它，发现它获取了正确的数据，但没有绘制新数据。

             var modifyRequestData = function (d) {

                var d = $.parseJSON(d);

                var jsonData = {};
                jsonData.data = d.Products;
                jsonData.recordsTotal = d.TotalCount;
                jsonData.recordsFiltered = d.Products.length

                return JSON.stringify(jsonData);
            };

            var modifyParams = function (d) {

                var params = {};

                params.Draw = d.draw;
                params.Page = parseInt(d.start) + 1;
                params.OrderColumn = d.columns[d.order[0].column].data;
                params.OrderType = d.order[0].dir;

                $(settings.searchFormID).find("input, select").each(function () {

                    var val = $(this).val();
                    var name = this.name;

                    params[name] = val;
                });

                return params;
            };

            var getProducts = function () {

                var columns = [
                  { "data": "Id" },
                  { "data": "Name" },
                  { "data": "Price" },
                  { "data": "Id" }
                ]

                var modifiedColumns = [{
                    'targets': 0,
                    'searchable': false,
                    'orderable': false,
                    'width': '1%',
                    'className': 'dt-body-center',
                    'render': function (data, type, full, meta) {
                        return '<input type="checkbox">';
                    }
                }, {
                    'targets': columns.length - 1,
                    'searchable': false,
                    'orderable': false,
                    'width': '1%',
                    'className': 'dt-body-center',
                    'render': function (data, type, full, meta) {
                        return ''
                    }
                }];

                var ajaxConfig = {
                    "url": "/api/products/",
                    "dataFilter": modifyRequestData,
                    "data": modifyParams
                }

                productDatatable = $('#listContainer table').DataTable({
                    "bProcessing": true,
                    "bServerSide": true,
                    "bFilter": true,
                    "lengthChange": true,
                    "ajax": ajaxConfig,
                    "columns": columns,
                    'columnDefs': modifiedColumns
                });

                productDatatable.on('draw.dt', function () {
                    alert('Table redraw');
                });

            };

Answer 1

我和你有完全相同的问题，我终于发现我已经硬编码了测试原因，在服务器端的返回对象中将绘制值设置为1。

因此，由于第一次调用时draw属性的值为1，因此数据表更新了我的结果，但是在更新时，绘制值为4，我仍然返回1.

你可以在 jquery.dataTables.js 文件中找到这个函数：

function _fnAjaxUpdateDraw ( settings, json )

尤其是这段代码：

    if ( draw ) {
        // Protect against out of sequence returns
        if ( draw*1 < settings.iDraw ) {
            return;
        }
        settings.iDraw = draw * 1;
    }

在服务器端正确设置了绘图属性的值后，一切都开始运作良好。

首次初始化后，DatatTable绘制不起作用

1 个答案: