Ajax searching in Datatables

Question

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?

you can use the built in ajax and still send what every you want to the server. — Bindrid
– Bindrid, Commented Feb 27, 2017 at 2:07
no but you do need to make sure the data being returned matches your data table defnintiion — Bindrid
– Bindrid, Commented Feb 27, 2017 at 2:08
I used the initComplete to remove the keypress event handler off of the searchbox and replaced it with one that watched for a return key press. Also added a small search button next to it. — Bindrid
– Bindrid, Commented Feb 27, 2017 at 2:11

Bindrid · Accepted Answer · 2017-02-27 04:53:26Z

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

     });
   }

Very useful, I didn't know about calling the search method of datatables directly from code.

Collectives™ on Stack Overflow

Ajax searching in Datatables

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related