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

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