Question: How to use .dataTables object & .DataTables API together?

lindseyb

I'm building a table that uses the jQuery object for most options and calls in some extensions as well— but I need to leverage the API for hide/show: is this doable? If so, how should I go about it?

Here's a look at my code:

       var table_b = $('#table-b')
      .dataTable({
            responsive: true,
            stateSave: true,
            "pagingType": "simple",
            "dom": '<"top"<"form-row"f><"form-row"<"left"l><"right paginate-button-group"ip>>>',
            "language": {
                  "search": "<span class='search-label'>Search</span> _INPUT_ "
            },
            "oLanguage": {
                  "oPaginate": {
                        "sNext": "<span class='on-right' data-icon='c'></span>",
                        "sPrevious": "<span class='on-left' data-icon='d'></span>"
                  }
            }
      })
      .columnFilter(
      {
            aoColumns:[
                  null,
                  null,
                  { sSelector: "#filter-status", type: "select",  values: [ 'Incomplete', 'Submitted', 'Not Started'  ] },
                  { sSelector: "#filter-deadline", type: "date-range" },
            ]
      });

The hide/show code uses column().visible() but I can't get it to work unless I use .DataTables() …which breaks plugins like .columnFilter of course.

Here's the hide/show code I'd like to incorporate:

      // Toggle Row Visibility
      // $('.toggle-vis input').on('ifClicked', function(event){
      // var column = table_b.column( $(this).attr('data-column') );
      // column.visible( ! column.visible() );
      // });

Thanks so much for any input on this!
LB

allan

It looks like you've asked this in Github as well - could you please just ask in one place (here, since the github issues list is for bugs). DataTables is maintained by only myself, so dealing with duplicates, although it doesn't take much time, does take time away from being able to provide help to others.

To answer your question, yes you can use both styles:

var oldStyle = $('#myTable').dataTable( { ... } );
var api = $('#myTable').DataTable();

Or:

var oldStyle = $('#myTable').dataTable( { ... } );
var api = oldStyle.api();

You can call $().DataTable() and $().dataTable() as often as you want, but only once (the first time) with options.

Allan

lindseyb

My apologies for double posting and thank you for your prompt response!

--

So sorry! Still not sure how to add hide/show function within the API. Putting even console.log inside var api = table_b.api({}); breaks the table. Do I somehow need to leverage the api variable name instead?

The Gist of my DataTable, currently

https://gist.github.com/bradfordbradford/2c37f4ab00b9b643e070

In summary, I just need to add API based Hide/Show Columns Dynamically

            $('.toggle-vis input').on('ifClicked', function(event){   

                   var column = table_b.column( $(this).attr('data-column') );   

                   column.visible( ! column.visible() );   

            });   

Code snippet based on: http://www.datatables.net/examples/api/show_hide.html

Thanks again! I know you're super busy being the lead dev on this project!

LB

allan

Just to check - you are using DataTables 1.10+ are you? It looks like that code should work if you are.

Edit - I see the error:

table_b.column

Should be:

api.column( ... );

Allan

lindseyb

Ah, that helped! Thanks Allan.

For anyone asking the same newbie question, here's what worked for me:

I used a API callback to avoid initializing twice ( http://datatables.net/manual/tech-notes/3 ):

var table_b = $('#table-b').dataTable( {
      responsive: true,
      stateSave: true,
      "pagingType": "simple",
      "dom": '<"top"<"form-row"f><"form-row"<"left"l><"right paginate-button-group"ip>>>',
      "language": {
            "search": "<span class='search-label'>Search</span> _INPUT_ "
      },
      "oLanguage": {
            "oPaginate": {
                  "sNext": "<span class='on-right' data-icon='c'></span>",
                  "sPrevious": "<span class='on-left' data-icon='d'></span>"
            }
      },
      "initComplete": function () {
            var api_table_b = this.api();
            $('.toggle-vis input').on('ifClicked', function(event){
                  var column = api_table_b.column( $(this).attr('data-column') );
                  column.visible( ! column.visible() );
                  });
            }
      })
      .columnFilter(
      {
            aoColumns:[
                  null,
                  null,
                  { sSelector: "#filter-status", type: "select",  values: [ 'Incomplete', 'Submitted', 'Not Started'  ] },
                  { sSelector: "#filter-deadline", type: "date-range" },
            ]
      });

Best,

LB