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警告：table 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();

     });
   }

在Datatables中搜索Ajax

1 个答案: