jquery - Ajax 在数据表中搜索

Question

我想做的是对数据表进行 ajax 搜索。由于某些原因，我没有考虑数据表提供的默认搜索功能，因此我创建了一个带有按钮的文本框。

在我的 Api 上，我为 javascript 函数发回一个 Json

$("#buttonSearchDevice").on('click', function () {

    var searchString = $("#searchString").val();

    $.ajax({
        url: "/Devices/LoadDevices",
        type: "GET",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data:
            {
                searchString: searchString
            },
        success: function (data) {

            //if (data.length == 0)
            //    $('#devicesList').dataTable().fnClearTable();
            //else {
            //    $('#devicesList').dataTable().fnClearTable();
            //    $('#devicesList').dataTable().fnAddData(data);
            //}
        }
    });
});

我尝试使用注释代码来“刷新”我的数据表，但没有成功，出现以下错误:

DataTables warning: table id=devicesList - Requested unknown parameter 'model' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4

我是否需要重新创建整个数据表(销毁并创建)，或者可以仅使用新的通信数据刷新它？

Answer 1

正如我的评论中所提到的，下面的示例将数据表上的事件处理程序取下并放在我的事件处理程序上，以便它仅在单击按钮时触发。该按钮由 DataTables 提供的事件处理程序添加。
就像我提到的，我这样做是为了让通风处理程序在每次按键时都会引发 ajax 调用。

你可以在这里看到它的工作原理(除非它被删除)

http://live.datatables.net/tayelawu/1/edit

        $(document).ready(function () {
               $("#example").on("preInit.dt", function(){

                 $("#example_wrapper input[type='search']").after("<button type='button' id='btnexample_search'></button>");
               });


            $('#example').DataTable({
                "processing": false,
                "serverSide": true,
              "initComplete":function(){onint();},
                "ajax":{
                    url: "/examples/server_side/scripts/objects.php",
                    type:"GET",
                  data:function(dtp){
                    // change the return value to what your server is expecting
                    // here is the path to the search value in the textbox
                    var searchValue = dtp.search.value;
                    return dtp;}
                },
                "columns": [
                { "data": "first_name" },
                { "data": "last_name" },
                { "data": "position" },
                { "data": "office" },
                { "data": "start_date" },
                { "data": "salary" }
                ]
            });

        });

   // this function is used to intialize the event handlers
   function onint(){
     // take off all events from the searchfield
     $("#example_wrapper input[type='search']").off();
     // Use return key to trigger search
     $("#example_wrapper input[type='search']").on("keydown", function(evt){
          if(evt.keyCode == 13){
            $("#example").DataTable().search($("input[type='search']").val()).draw();
          }
     });
     $("#btnexample_search").button().on("click", function(){
           $("#example").DataTable().search($("input[type='search']").val()).draw();

     });
   }