How to run datatable api with default search value?

Question

I was wondering how to load datatable api with default search value. I tried something like this.

$(document).ready(function{
    $('#datatable').DataTable();
    $("input[type=search]").val('john')
});

But since, in order to show the search results the search box needs to be submitted. How do I this ?

Louys Patrice Bessette · Accepted Answer · 2016-10-30 21:38:54Z

1

Try triggering a keyup event...

$(document).ready(function{
    $("#datatable").DataTable();
    $("input[type='search']").val("john").trigger("keyup");
});

EDIT

I found a way to disable the pagination when a search is active.
Meaning when the search input field isn't empty.

I refined my solution to also hide the unsefull controls, considering a no-pagination dataTable.

See it on CodePen.

searchField.on("input",function(){

    // Grab the seach term (text inputed in the search field)
    searchTerm = $(this).val();
    console.log("searchTerm: "+searchTerm);

    // The paginate links and buttons...
    var paginate = $("#myTable").siblings('.dataTables_paginate');

    // Remove the whole table when search term is empty.
    if(searchTerm==""){
        console.log("searchField: empty");

        // Set pagination to desired length
        // and show controls.
        myTable.page.len( paginationLength ).columns.adjust().draw();
        paginate.show();
        pageLenghtSelect.show();
    }else{
        console.log("searchField: NOT empty");

        // Set pagination to no pagination at all (only one page).
        // and hide controls.
        myTable.page.len( -1 ).columns.adjust().draw();
        paginate.hide();
        pageLenghtSelect.hide();

    }
});

edited Oct 30, 2016 at 21:38

answered Oct 30, 2016 at 15:46

Louys Patrice Bessette

34k7 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Louys Patrice Bessette Over a year ago

I just tryed on my side... It works with keyup and with input (the events), but doesn't with keydown or keypress.

Rabin Lama Dong Over a year ago

Okay. I found another way to do it. $('#datatable').DataTable({ "paging": false, "oSearch": {"sSearch": searchText} }); I put the user typed value in the variable searchText But now, how do I turn the table to normal when the search box is cleared ?

Louys Patrice Bessette Over a year ago

Could you define «turn to normal»? Because, the way you've found is working too. I confirm. If «normal» refers to pagination being gone... Simply remove "paging": false, which disables pagination (it ain't helpfull in your search concern. ;)

Rabin Lama Dong Over a year ago

I mean, after the user types in the search box, the pagination is gone. And I need the pagination back, when the search box is cleared. Sorry for my poor explanation.

Louys Patrice Bessette Over a year ago

Do you really want to disable the pagination for this first onload search ?

|

Collectives™ on Stack Overflow

How to run datatable api with default search value?

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related