why does live search in Ajax Datatables is not working in my code?

Question

I tried to implement ajax datatable in my code and it is working fine but when I tried to implement live search in my table it is not working when I look in the inspect element-> network the ajax is working but it not filtering the data according to my search please help me find a solution

Here is my controller code:

function ums_permission_datatable_ajax(){   
        // Datatables Variables
        $draw = intval($this->input->post("draw"));
        $start = intval($this->input->post("start"));
        $length = intval($this->input->post("length"));
                $search = $this->input->post("search");
        $order = $this->input->post("order");

        $col = 0;
        $dir = "";
        if(!empty($order)) {
            foreach($order as $o) {
                $col = $o['column'];
                $dir= $o['dir'];
            }
        }
        if($dir != "asc" && $dir != "desc") {
            $dir = "asc";
        }
        $columns_valid = array(
            "ums_permissions.name", 
            "ums_permissions.function", 
            "ums_permissions.display", 
            "ums_permissions.description", 
            "ums_permissions.system",
        );
        if(!isset($columns_valid[$col])) {
            $order = null;
        } else {
            $order = $columns_valid[$col];
        }
        $orderby[$order] = $dir;

        $total_records = $this->Ums_permissions_model->count();
        //echo '<pre>';print_r($orderby);die;
        $ums_permissions = $this->Ums_permissions_model->retrieve(array(), $length, $start, $orderby);
        //echo $this->db->last_query();die;
        $data = array();
        foreach($ums_permissions as $row) {
            $data[] = array(
                $row->name,                   
                $row->function,             
                $row->display,
                $row->description,
                $row->system,  
                "<a data-toggle='tooltip' data-placement='top' title='Edit' href='".site_url('ums_permissions/add_edit/').$row->id."' class='btn btn-white btn-sm'><i class='fa fa-pencil-square-o fa-fw'></i></a>
                <a data-toggle='tooltip' href='#'  title='Delete' class='btn btn-white btn-sm' role='button' id='delete_wpa_death1' data-deleteid='$row->id'><i class='fa fa-trash fa-fw'></i></a>",
            );
        }
        $output = array("draw" => $draw,"recordsTotal" => $total_records,"recordsFiltered" => $total_records,"data" => $data);  
        echo json_encode($output);
        exit();
    }

And Here is my Js code:

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

                     $("#dataTables_wrapper input[type='search']").after("<button type='button' id='btnexample_search'></button>");
                   });                  
            $.fn.dataTable.moment('DD/MM/YYYY');  
            $('.dataTables').dataTable({
                iDisplayLength: 50,
                "initComplete":function(){onint();},
                "processing": true,
                "serverSide": true,
                "ajax": {
                    url : "<?php echo site_url("ums_permissions/ums_permission_datatable_ajax") ?>",
                    type : 'POST',
                    "data": function(d) {
                       var frm_data = $('form').serializeArray();
                       $.each(frm_data, function(key, val) {
                         d[val.name] = val.value;
                       });
                       var searchValue = d.search.value;
                       return d;
                     }
                },
            }); 
        });
        function onint(){  
         // take off all events from the searchfield
         $("#dataTables_wrapper input[type='search']").off();
         // Use return key to trigger search
         $("#dataTables_wrapper input[type='search']").on("keydown", function(evt){
              if(evt.keyCode == 13){
                $("#dataTables").DataTable().search($("input[type='search']").val()).draw();
              }
         });
         $("#btnexample_search").button().on("click", function(){
               $("#dataTables").DataTable().search($("input[type='search']").val()).draw();

         });
       }

Answer 1

You will have to do all the searching & filtering on server side. For every request of search/filter or page, the datatable passes all of this as form data to the server page. Refer https://www.datatables.net/manual/server-side You will have to use this form data to filter/search/paginate on the records on sql table & pass it accordingly to the client. The datatable merely shows what it gets from the server.