By default, display table empty unless a filter on the data returns matches ... How do I do it?

By default, display table empty unless a filter on the data returns matches ... How do I do it?

murciego.martinmurciego.martin Posts: 7Questions: 0Answers: 0

Greetings, I want to ask you about a behavior that they asked me exclusively to achieve with the DataTables that I do not find how to achieve it.
In my scenario, I retrieve data from a server (node ​​js) that returns data in json format and I have it paged from the DataTables configuration.
But I was asked that the default listing does not show any rows unless a filter is written that has matching results. How I do this?

I'm not sure, but is it possible that the datatables have already downloaded all the records before showing them?

My Config tiene:
bLengthChange: true,
lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "Todas"]],
pagingType: "first_last_numbers",
pageLength: 5,
data: dataSet,
ajax: "/reservas/json/",
sAjaxDataProp: "datos.reservas",

Replies

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    Here is a very simplistic approach:
    http://live.datatables.net/rurucopu/1/edit

    It uses the search to perform an initial table search for data that never will be in the table. Then an input where it will search, using search() API, once the button is clicked. You can handle the search input in any way you like. Last it uses the dom option to remove the default search input.

    There are probably other more elegant ways to do this.

    Kevin

  • murciego.martinmurciego.martin Posts: 7Questions: 0Answers: 0

    Thanks for answering. I'm going to try it.

  • murciego.martinmurciego.martin Posts: 7Questions: 0Answers: 0

    Based on your answer, the only thing that occurred to me is to remove the search box and include one:
    <input type="text" id="search-box-dataTable" class="form-control campo search-box-dataTable" name="search-box-dataTable" required="">

    And have them entered in the same call to the search method of the api. So when it's empty look for something that does not match.

        $("input.search-box-dataTable").on('keyup', function() {
            if ( $('input.search-box-dataTable').val() === '' ) {
                myDatatable.search('#@://d+5', false, true).draw();
            } else {
                myDatatable.search($(this).val()).draw();
            }
        });
    

    Now I have to create filters for all the columns keeping this behavior. Thanks

This discussion has been closed.