Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Multiple DataTables on the same page with different ajax sources

I have several tables on a single page using dataTables. Each needs to have it's own 'sAjaxSource'. I can't seem to figure out exactly how to do this. Here's the minimal code I have:

         var oTable = $('.datatable').dataTable( {
                "bProcessing": true,
                "sAjaxSource": "/ajax/function",
                "bSort": false,
                "fnDrawCallback": function() {
                       //some click events initilized here
                 }
            });

This is basically the bare bone setup. Each table as the datatable class and a unique ID. But not sure how to change the AjaxSource, based on a specific table.

Thank you!

EDIT:

Here's what I ended up doing:

        $('.datatable').each(function(index){

             $('#'+$(this).attr('id')).dataTable( {
                "bProcessing": true,
                "sAjaxSource": $(this).children('caption').html(),
                "bSort": false,
                "fnDrawCallback": function() {
                 }
            });
        });

Inside the table I put a caption tag that is hidden by css and contains the Ajax Source URL. It iterates through each instance and grabs the url.

This seems to be working so far!

like image 911
dzm Avatar asked Oct 19 '11 20:10

dzm


2 Answers

Will this not work? It uses the id rather than the class to uniquely identify each data table and attaches a separate source to each table based on the id.

  var oTable = $('#FirstDataTableID').dataTable( {
            "bProcessing": true,
            "sAjaxSource": "/ajax/function",
            "bSort": false,
            "fnDrawCallback": function() {
                   //some click events initilized here
             }
        });

  var oTable = $('#SecondDataTableID').dataTable( {
            "bProcessing": true,
            "sAjaxSource": "/ajax/other_function",
            "bSort": false,
            "fnDrawCallback": function() {
                   //some click events initilized here
             }
        });
like image 125
Larry Lustig Avatar answered Oct 22 '22 18:10

Larry Lustig


I had the same problem, which I solved using a html5 data- attribute and initialization code similar to yours:

$('.dataTableServer').each(function () {
        var source = $(this).attr("data-source");
        $(this).dataTable({
            "sPaginationType": "full_numbers",
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": source
        });
    });

that way you don't have to create an id for each dataTable

like image 6
Eric Strong Avatar answered Oct 22 '22 16:10

Eric Strong