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

Question

我正在从 WebAPI 填充我的 jQuery 数据表(版本: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# 接口(interface)代码:

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][目录] 升序 搜索[正则表达式] 错误的 搜索[值] 2个 开始 0

响应:

{"draw":1,"recordsTotal":4,"recordsFiltered":25,"data":[["Hunain","123"],["hk","asd"], [“丹妮莉丝·坦格利安” "123"],["",""]]}

执行搜索后:

• 要求:

<强>_ 1503560409319 列[0][数据] 0 列[0][名称] 列[0] [可订购] 真的 列[0][搜索][正则表达式] 错误的 列[0][搜索][值] 列 [0] [可搜索] 真的 列[1][数据] 1个 列[1][名称] 列[1] [可订购] 真的 列[1][搜索][正则表达式] 错误的 列[1][搜索][值] 列 [1][可搜索] 真的 画 2个 长度 10 顺序[0][列] 0 顺序[0][目录] 升序 搜索[正则表达式] 错误的 搜索[值] w 开始 0

• 回复:

{"draw":1,"recordsTotal":1,"recordsFiltered":25,"data":[["Waleed","123"]]}

Answer 1

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

---

来自docs :

The draw counter that this object is a response to - from the draw parameter sent as part of the data request. Note that it is strongly recommended for security reasons that you cast this parameter to an integer, rather than simply echoing back to the client what it sent in the draw parameter, in order to prevent Cross Site Scripting (XSS) attacks.