数据表中的 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 警告：表 id=devicesList - 请求的未知参数 第 0 行第 1 列的“模型”。有关此错误的更多信息， 请看http://datatables.net/tn/4

我需要重新创建整个数据表（销毁并创建）还是可以只用新的数据刷新它？

Answer 1

正如我在评论中提到的，下面的示例取消了 datatable 放置的事件处理程序并放置在我的事件处理程序上，因此它仅在单击按钮时触发。该按钮由 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();

     });
   }