Ajax searching in Datatables

What I'm trying to do is to do an ajax search to a datatable. I'm not considering the default search functionality provided by datatables for some reasons, so I created a textbox with a button for it.

On my Api, I'm sending back a Json for the javascript function

$("#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);
            //}
        }
    });
});

I tried the commented code to "refresh" my datatables, but no success, I'm getting the following error:

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

Do I need to recreate the entire datatable (destroy and create) or is possible to just refresh it with the new comming data?

Answers 1

  • The sample below, as mentioned in my comment, takes off the event handler put on by datatable and puts on my one so it fires only on a button click. The button is added by an event handler provided by DataTables.
    Like I mentioned, I do this so the vent handler does cause an ajax call on every key press.

    you can see it work here (unless it gets taken down)

    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();
    
         });
       }
    

Related Articles