Question

我正在从WebAPI填充我的jQuery Datatable（版本：1.10.15）并且它可以工作但是当我通过搜索框搜索数据表时，它不会用更新的数据填充数据表。为什么呢？

我检查过，它会发送搜索值并从服务器提供更新的数据，但不会使用新返回的数据填充表。

function show()
{                               
  $('#example').DataTable({
//  "processing": true,
    "serverSide": true,
    "retrieve": true,
    "destroy": true,
    "pagination": true,
//  "contentType": 'application/json; charset=utf-8',
    "ajax": "http://localhost:28071/Users"
  });
}

更新

C＃api代码：

namespace WebApiHimHer.Controllers
{
    public class UsersController : ApiController
    {
        [HttpGet]
        public DTResult GetData([FromUri]DTParameters v)
        {

            List<string[]> s = new List<string[]>();

            //List<basicoperations> s = new List<basicoperations>();

            basicoperations bo= new basicoperations();


            s = bo.getUsers(v.length, v.start, 1, v.sortOrder, v.search.Value);

            DTResult r = new DTResult();
            r.draw = 1;
            r.recordsFiltered = s.Count;
            r.recordsTotal = 100; ;
            r.data = s;

            return r;
        }
    }

    public class DTResult
    {
        public int draw { get; set; }
        public int recordsTotal { get; set; }
        public int recordsFiltered { get; set; }
        public List<string[]> data { get; set; }
    }
    public abstract class DTRow
    {
        public virtual string DT_RowId
        {
            get { return null; }
        }
        public virtual string DT_RowClass
        {
            get { return null; }
        }
        public virtual object DT_RowData
        {
            get { return null; }
        }
    }
    public class DTParameters
    {
        public int draw { get; set; }
        public DTColumn[] columns { get; set; }
        public DTOrder[] order { get; set; }
        public int start { get; set; }
        public int length { get; set; }
        public DTSearch search { get; set; }
        public string sortOrder
        {
            get
            {
                return columns != null && order != null && order.Length > 0
                    ? (columns[order[0].Column].Data + (order[0].Dir == DTOrderDir.DESC ? " " + order[0].Dir : string.Empty))
                    : null;
            }
        }
    }
    public class DTColumn
    {
        public string Data { get; set; }
        public string Name { get; set; }
        public bool Searchable { get; set; }
        public bool Orderable { get; set; }
        public DTSearch Search { get; set; }
    }
    public class DTOrder
    {
        public int Column { get; set; }
        public DTOrderDir Dir { get; set; }
    }
    public enum DTOrderDir
    {
        ASC,
        DESC
    }
    public class DTSearch
    {
        public string Value { get; set; }
        public bool Regex { get; set; }


    }

}

我在初始表加载后和执行搜索后发布请求和响应

初次加载后：

请求：

_ 1503560388132 列[0] [数据] 0 列[0] [名称] 列[0] [订购] 真正列[0] [搜索] [正则表达式] 假列[0] [搜索] [值] 列[0] [搜索] 真正列[1] [数据] 1 列[1] [名称] 列[1] [订购] 真正列[1] [搜索] [正则表达式] 假列[1] [搜索] [值] 列[1] [搜索] 真正画 2 长度 10 顺序[0] [列] 0 顺序[0] [DIR] ASC 搜索[正则表达式] 假搜索[值] 2 开始 0

响应：

{ “画”：1， “recordsTotal”：4 “recordsFiltered”：25 “数据”：[[ “Hunain”， “123”]，[ “HK”， “ASD”]， [“daenerys Targaryen” ， “123”]，[ “”， “”]]}

执行搜索后：

请求：

_ 1503560409319 列[0] [数据] 0 列[0] [名称] 列[0] [订购] 真正列[0] [搜索] [正则表达式] 假列[0] [搜索] [值] 列[0] [搜索] 真正列[1] [数据] 1 列[1] [名称] 列[1] [订购] 真正列[1] [搜索] [正则表达式] 假列[1] [搜索] [值] 列[1] [搜索] 真正画 2 长度 10 顺序[0] [列] 0 顺序[0] [DIR] ASC 搜索[正则表达式] 假搜索[值] w ^ 开始 0

响应：

{ “画”：1， “recordsTotal”：1， “recordsFiltered”：25 “数据”：[[ “瓦利德”， “123”]]}

Answer 1

原因是发送和接收的draw参数不相同，因为我在服务器代码中使draw静态不匹配。我返回了与发送时相同的draw参数。

来自docs：

此对象是对绘图的响应的绘制计数器作为数据请求的一部分发送的参数。请注意，这是强烈的出于安全原因，建议您将此参数强制转换为整数，而不是简单地回送给客户端发送的内容 draw参数，以防止跨站点脚本（XSS）攻击。

Answer 2

修改

<table id="example" class="display"> <thead> <tr> <th>First Name</th> <th>Last Name</th> </tr> </thead>

<强> HTML

{{1}}

Jsfiddle

Answer 3

不确定是否发现错误，请检查一下。

验证applicationhost.config或web.config文件中的configuration/system.webServer/security/requestFiltering/requestLimits@maxQueryString设置。

Answer 4

//For me it was two things.

//wrap the table javascript with 

//function _displayItems(data) { var table = $('#...

//Then using the closing brackets:
//destroy then clear
    productsTable.destroy();
    productsTable.clear();
}

function _displayItems() {
  fetch(uri)
    .then(response => response.json())
    .then(data => _displayItems(data))
    .catch(error => console.error('Unable to get items.', error));
}

    var tableName = $('#data').DataTable({
        "processing": true,
        "data": data,
        "columns": [
            { "name": "name", "data": "name" },
            { "name": "id", "data": "id" },
            {
                "render": function (data, type, full, meta) {
                    var buttonID = "edit_" + full.id;
                    return '<a id="' + buttonID + '" class="btn btn-outline-info waves-effect editBtn" role="button">Edit</a>';
                }
            },
            {
                "render": function (data, type, full, meta) {
                    var buttonID = "delete_" + full.id;
                    return ' <a id="' + buttonID + '" onclick="deleteUserRoleModal()" type="button" class="btn btn-outline-danger waves-effect removeRole" role="button">Delete</a>';
                }
            }
        ],
        "responsive": true,
        "dom": 'Bfrtip',
        "buttons": [
            'copy', 'excel', 'pdf',
            {
                text: 'Delete',
            }
        ],
        "initComplete": function () {
            this.api().columns([0]).every(function () {
                var column = this;
                var select = $('<select class="selectpicker" data-size="5" data-live-search="true"><option value="">Application Role (All)</option></select>')
                    .appendTo("#table").end()
                    .on('change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search(val ? '^' + val + '$' : '', true, false)
                            .draw();
                    });

                column.cells('', column[0]).render('display').sort().unique().each(function (d, j) {
                    if (column.search() === '^' + d + '$') {
                        select.append('<option value="' + d + '" selected="selected">' + d + '</option>')
                    }
                    else {
                        select.append('<option value="' + d + '">' + d + '</option>')
                    }
                });
            });
        },

        "bJqueryUI": true,
        "bPaginate": false,
        "aaSorting": [[1, 'asc']],
        "aoPreSearchCols": [[1]],

        "lengthMenu": [
            [12, 24, 48, 1000],
            ['12', '24', '48', 'all']
        ],
        "language": {
            searchPlaceholder: "? Role Screen ",
            search: " ",
        }
    });

    $.fn.dataTable.Buttons(productsTable, {
        buttons: [
            'copy', 'excel', 'pdf'
        ]
    });
    productsTable.buttons().container()
        .appendTo($('.col-sm-6:eq(0)', productsTable.table().container()));
    $("#todos" + "#table").DataTable({
        responsive: true
    });

    //destroy then clear
    productsTable.destroy();
    productsTable.clear();
}

为什么jquery数据表在搜索后没有填充新更新的数据？

4 个答案: