Multiple DataTables on the same page with differen

Question

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!

Answer 1

You Can use two or more than that on the same page. I've done that and datatables works quite nicely. Datatables stores the data locally even the records was removed from it asynchronously. Hence we need to make it clear always to show the correct result when we searched the removed records. As datatables needs to initialized only once, we need to keep in mind, for each datatables on the same page we have to keep initializing the datables because they are storing the local records as we dont want that because on the same page we do store/ show different datas.

So. We have to use the method cohesively as

$("#Id_of_Current_DTBL").DataTable().destroy();
$("#Id_of_Other1_DTBL").DataTable().clear();
$("#Id_of_Other2_DTBL").DataTable().clear();

This will sort out the problem.

Answer 2

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
             }
        });

Answer 3

You would need to select each table sperately and apply the appropriate Ajax data source to it in order for you to get what you need. Right now you are selecting based on the class name:

$(".dataTable")

will probably need to be converted to:

$("#dataTable1")

I guess this will get tedious if you have a lot of tables but that is pretty much the only way you can do what you are proposing to do.

Answer 4

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