Multiple DataTables on the same page with different sources of ajax

advertisements

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!


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