How do I implement individual column filters with DataTables (serverSide: true)?

Question

In my datatable, search column doesn't work. because, I get data from database 10 by 10 for each page with ajax by clicking page number.I mean pagination is in server code. dattable column search server side gives me just first page result. how should I do this?

Here is my datatable script:

$('#table_id').DataTable({
        "order": [[ 3, "desc" ]],
        "destroy": true,
        "dom": "Bfrtip",
        "serverSide": true,
        "processing" : true,
        "searching": false,
        "aoColumnDefs": [
            { "bSortable": false, "aTargets": [ 0, 1, 2, 3 , 4] },
            { "bSearchable": false, "aTargets": [ 0, 1, 2, 3, 4 ] }
        ] ,
        "pageLength": 10,
        "ajax" : function (data , callback, settings) {

            $.ajax({
                url: url
                type: 'GET',
                contentType: 'application/json; charset=utf-8',
                data: {params: {page: data.start / data.length  ,pageSize: data.length},
                    RecordsStart: data.start,
                    PageSize: data.length
                },
                success: function( data, textStatus, jQxhr ){
                    body = data.Data;

                    $('.box-header').on('click', '#addNewRecord' ,function () {
                        e.preventDefault();
                    });
                    callback({
                        // draw: data.draw,
                        data: body,
                        recordsTotal:  data.TotalRecords,
                        recordsFiltered:  data.RecordsFiltered,
                    });
                },
                error: function( jqXhr, textStatus, errorThrown ){
                }
            });
        },
        "columns": [
            {
                "title":"Id",
                "class":'id',
                "data": "id"
            },
            {
                "title": "name",
                "class":"name",
                "data": "name"
            },
            {
                "title": "status",
                "class":"status",
                "data": "status"
            }
        ]
    });
 $(document).on("keyup","#searchName", function () {
        $name = document.getElementById("searchName").value;
        $.ajax({
            url: url,
            type:"GET",
            data:{name:$name},
            success: function (data) {
                //Here I don't know how to add search record 
            }
        })

And PHP code:

 public function searchTable(Request $request)
{
    $keyWord = $request->input('searchName', 'default_value');
    $name = myTable::select('id','name', 'status')
        ->where('name', 'like',  '%' . $keyWord .'%')->get();

    return response()->json([
        'info' => $name,
    ]);

}

Answer 1

The following code shows how you can search individual columns:

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

    // DataTable
    var table = $('#example').DataTable();

    // Apply the search
    table.columns().every( function () {
        var that = this;
        $( 'input', this.footer() ).on( 'keyup change clear', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );

Like below image: