How to pass variable to datatable search field via URL?

Question

I am currently working on a laravel 5.4 project in which I have successfully implemented a datatable using DataTables jQuery Plugin. This datatable(#sample_1) includes a search field by default which works fine and filters records based on search.

The datatable is available at /home/loan I want to know if there is any way I can load the above page with a filtered list of records by passing the search string to the search field of datatable. ex: /home/loan?search=bella

Upon inspecting my datatable html code in chrome I found datatable search has

<label>Search:
<input type="search" class="form-control input-sm input-small input-inline" placeholder="" aria-controls="sample_1">
</label>

I believe This is included by the datatable plugin. I could not find a way to assign name/id to it so that I can try doing /home/loan?search=bella I think that would be the simplest way if it worked. But here is the javascript

var initTable1 = function () {

    var table = $('#sample_1');

    // begin first table
    table.dataTable({

        // Internationalisation. For more info refer to http://datatables.net/manual/i18n
        "language": {
            "aria": {
                "sortAscending": ": activate to sort column ascending",
                "sortDescending": ": activate to sort column descending"
            },
            "emptyTable": "No data available in table",
            "info": "Showing _END_ out of _TOTAL_ loans",
            "infoEmpty": "No loans found",
            "infoFiltered": "(filtered1 from _MAX_ total loans)",
            "lengthMenu": "Show _MENU_",
            "search": "Search:",
            "zeroRecords": "No matching loans found",
            "paginate": {
                "previous":"Prev",
                "next": "Next",
                "last": "Last",
                "first": "First"
            }
        },


        "bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.

        "lengthMenu": [
            [11, 20, 30, -1],
            [11, 20, 30, "All"] // change per page values here
        ],
        // set the initial value
        "pageLength": 11,            
        "pagingType": "bootstrap_full_number",
        "columnDefs": [
            {  // set default column settings
                'orderable': true,
                'targets': [0]
            }, 
            {
                "searchable": false,
                "targets": [0]
            },
            {
                "className": "dt-right", 
                //"targets": [2]
            }
        ],
        "order": [
            [1, "asc"]
        ] // set first column as a default sort by asc
    });

Please help me with this

can't you simply read the query parameters and set the key as search-key in the datatable? — JohnnyAW, Apr 18 '17 at 14:21
@JohnnyAW I tried searching for it and found nothing of a default search-key parameter for datatable. — Sapnesh Naik, Apr 18 '17 at 14:38
see this -> http://stackoverflow.com/questions/30067309/datatables-make-url-query-string-from-table-filter — davidkonrad, Apr 19 '17 at 05:59
Possible duplicate of [DataTables: Make url query string from table filter](http://stackoverflow.com/questions/30067309/datatables-make-url-query-string-from-table-filter) — nyedidikeke, Apr 19 '17 at 10:47

abhishek khandait · Accepted Answer · 2017-04-19T10:49:16.747

You need to use initComplete to redraw the table after getting the url parameteres.

function getParam()
    {
        return window.location.href.slice(window.location.href.indexOf('?') + 1).split('=')[1];
    }

var table = $('#sample_1');

// begin first table
table.dataTable({

    // Internationalisation. For more info refer to http://datatables.net/manual/i18n
    "language": {
        "aria": {
            "sortAscending": ": activate to sort column ascending",
            "sortDescending": ": activate to sort column descending"
        },
        "emptyTable": "No data available in table",
        "info": "Showing _END_ out of _TOTAL_ loans",
        "infoEmpty": "No loans found",
        "infoFiltered": "(filtered1 from _MAX_ total loans)",
        "lengthMenu": "Show _MENU_",
        "search": "Search:",
        "zeroRecords": "No matching loans found",
        "paginate": {
            "previous":"Prev",
            "next": "Next",
            "last": "Last",
            "first": "First"
        }
    },


    "bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.

    "lengthMenu": [
        [11, 20, 30, -1],
        [11, 20, 30, "All"] // change per page values here
    ],
    // set the initial value
    "pageLength": 11,            
    "pagingType": "bootstrap_full_number",
    "columnDefs": [
        {  // set default column settings
            'orderable': true,
            'targets': [0]
        }, 
        {
            "searchable": false,
            "targets": [0]
        },
        {
            "className": "dt-right", 
            //"targets": [2]
        }
    ],
    "order": [
        [1, "asc"]
    ], // set first column as a default sort by asc

    "initComplete": function () {
        this.api().search(getParam()).draw();
     });
});

This works! You are awesome! . Just one hickup now `?search=harish` works fine but when I include a space in search string like `?search=harish naik` the table doesnt get filtered and displays no matching records found. How to solve this? — Sapnesh Naik, Apr 19 '17 at 15:04
I just noticed the datatable search field gets populated with `harish%20naik` instead of `harish naik` I thinks that is what is causing the issue — Sapnesh Naik, Apr 19 '17 at 15:06
No worries! I solved the issue by using `decodeURI()` like `decodeURI(window.location.href.slice(window.location.href.indexOf('?') + 1).split('=')[1])` Thank You! — Sapnesh Naik, Apr 19 '17 at 15:15

How to pass variable to datatable search field via URL?

1 Answers1