Hiding datatable rows based on onclick on button

felichino

Hi all,

I have a datatable, I fill it using ajax

    function submitButton() {

        $('#loader').show();

        var keyword = null; // $("#keyword").val();
        var selected = $("#clientname :selected").map((_, e) => e.value).get();
        var clientname = selected.toString();

        var participant = null, tenderOrg = null, riskInd = null;

        if ($("#participant").select2("val") != null)  //selected2.toString();
        { participant = $("#participant").select2("val").toString(); }

        var price_from = $("#price_from").val();
        var price_to = $("#price_to").val();
        var date_from = $("#date_from").val();
        var date_to = $("#date_to").val();

        if ($("#tenderOrg").select2("val") != null)  //selected2.toString();
        { tenderOrg = $("#tenderOrg").select2("val").toString(); }

        if ($("#riskInd").select2("val") != null)  //selected2.toString();
        { riskInd = $("#riskInd").select2("val").toString(); }

        var data = JSON.stringify({ 'keyword': keyword, 'clientname': clientname, 'participant': participant, 'price_from': price_from, 'price_to': price_to, 'date_from': date_from, 'date_to': date_to, 'tenderOrg': tenderOrg, 'riskInd': riskInd });

        $.ajax({
            type: "post",
            url: '/Tables/Auction',
            contentType: "application/json; charset=utf-8",
            dataType: "html",
            data: data,
            async: true,
            success: function (response) {
                $("#tenderListHolder").html(response);
                myFunction();
                $('#loader').hide();
            }
        });
    }

everything is ok, I get data to html.
but I have 3 morre buttons,

 <div class="btn-group">
            <button type="button" id="actualButton" onclick="actualButton();" class="btn btn-success bleft">Актуально: @Model.actual</button>
            <button type="button" id="archiveButton" onclick="archiveButton();" class="btn btn-default bleft">В архиве: @Model.archived</button>
            <button type="button" id="cancelButton" onclick="cancelButton();" class="btn btn-danger bleft">Отменено: @Model.canceled</button>
        </div>

onclick on them I show only related data like this:

    $("#actualButton").click(function () {
        $.fn.dataTable.ext.search.push(
            function (settings, data, dataIndex) {
                return data[3] == "актуальный";
            }
        );       
        $('#tenderListTable').DataTable().draw();
    });

    $("#cancelButton").click(function () {
        $.fn.dataTable.ext.search.push(
            function (settings, data, dataIndex) {
                return data[3] == "отменен";
            }
        );
        $('#tenderListTable').DataTable().draw();
    });



$("#archiveButton").click(function () {
        $.fn.dataTable.ext.search.push(
            function (settings, data, dataIndex) {
                return data[3] == "архив";
            }
        );
        //   table1.draw();
        $('#tenderListTable').DataTable().draw();
    
  });

My problem is, when I click to one button, it shows ok, it displays only actual rows, but when I click to cancel button, it does not show anything.

whatever button I click first, it works, but on second click, I do not see data. for example when i click first to archive button, I see archieve rows, but after that when i click to actual button, no rows shown.

any idea?

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

It would still have the previous search too, so you would need to pop that off first, otherwise both the searches would be applied,

Colin

felichino

Colin, you mean, on each click to buttons, I have to run submitButton() function?

kthorngren

What Colin means is that you are pushing, onto the search array, the search plugin when the button is click. The $.fn.dataTable.ext.search is a standard Javascript array. Lets take your first button as an example:

    $("#actualButton").click(function () {
        $.fn.dataTable.ext.search.push(
            function (settings, data, dataIndex) {
                return data[3] == "актуальный";
            }
        );      
        $('#tenderListTable').DataTable().draw();
    });

The first time its clicked that plugin will be pushed onto the $.fn.dataTable.ext.search search array. The array length is one. The second time you click the button the plugin will be pushed onto the array. So now the length is two. If you click another button then that plugin will be pushed onto the array making the length three. Now you have two competing search terms which you don't want. In each of your click events you will need to use pop() to pop any plugins on the array before pushing the desired one. You need something like this in each of your click events:

    $("#actualButton").click(function () {
        $.fn.dataTable.ext.search.pop();  // Remove any previous search plugin
        $.fn.dataTable.ext.search.push(
            function (settings, data, dataIndex) {
                return data[3] == "актуальный";
            }
        );      
        $('#tenderListTable').DataTable().draw();
    });

Kevin

felichino

Thanks!