Hide a row before rendering if data (specific column) contains null

kaustubh.agrawal2000

Hello,

I have searched in the forum about this but could not fine a satisfactory answer /example..
Please Let me know how can I apply the filter to a table so that only rows with a (column value != null) will be displayed during rendering...

I dont want the user to press any button or do any action.. during rendering itself it should happen..

Thanks.

ShayDesh

Hi kaustubh.agrawal2000, I am thinking maybe in the row callback event. Test for your condition and remove the row if it matches.

"rowCallback": function( row, data, index ) {
                if (data["MyColumnData"] === null) {
                    $(row).remove();
                }
 }

But, I have never tried such a thing I usually filter data before it ever gets to the client. There is probably a better way to do this.

kaustubh.agrawal2000

Hi ShayDesh...

Thanks a lot for the answer.. it does work like a charm..
BTW, I have tried hiding it and it works

            rowCallback: function( row, data, index ) {
                if (data['column'] <= 0) {
                    $(row).hide();
                }
            },

in continuation...

can you suggest.. how can I toggle the hidden row after its hidden??
Basically, I want the table to initially show rows with status = active.. and
when user clicks a button (Show all button)...

all the rows should be shown...

ShayDesh

There are a lot of ways you could go about it. One of the ways I would try to do it (using bootstrap) is set up a button group. Upon the press of a button I would redraw my table. In the rollCallback I would test which button has active status and filter based on that

  <div class="btn-group pull-left" role="group">
       <button id="btnHidden" class="btn btn-default"  type="button">Hidden</button>
       <button id="btnAll" class="btn btn-default  type="button">All</button>
                      
    </div>

 $("#btnHidden").addClass("active");

  $("#btnAll").on('click', function () {
        $("#btnHidden").removeClass("active");
        $("#btnAll").addClass("active");
        methodToRedrawTable();
 });

 $("#btnHidden").on('click', function () {
        $("#btnAll").removeClass("active");
        $("#btnHidden").addClass("active");
          methodToRedrawTable();
 });

rowCallback: function( row, data, index ) {
    if (data['column'] <= 0 && $("#btnHidden").hasClass("active")) {
        $(row).hide();
    }
},

allan

I would suggest that you actually use a search plug-in for this. Using $().hide() will cause problems with the pagination information. For example if you had paging enabled and displaying 10 rows, but hide one with $().hide() - DataTables doesn't know that it is hidden, so it still puts the DOM node into the document, thinking there are 10 rows displayed, while in fact there are only 9.

Using a search plug-in will address that.

Allan

kaustubh.agrawal2000

Thanks a lot guys... it worked like a charm...!!

ronakvora091

Where should i put this rollback function please help me out!???

colin

Hi @ronakvora091 ,

See Kevin's example in this thread - there's a good demonstration of how to do it.

Cheers,

Colin

colin

The third argument to columns.render is for the full row's data - so you can read the value of the checkbox fro mthere.

Colin

asyrafshahrelnizam

Hye, after i hide the row. Numbering not start from no 1. Any solution?

kthorngren

Its hard to say without knowing what you are doing and how the number is generated. Please post a link to your page or a running test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

blesedbeing

Hi, i have problem solving how to hiding my 80+ column if there values in the data how do i solve this?