Multiple DataTables on the same page with different ajax sources

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!

Eric Strong · Accepted Answer · 2011-11-10 17:08:38Z

6

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

edited Nov 10, 2011 at 17:08

answered Nov 10, 2011 at 17:02

Eric Strong

1062 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Larry Lustig · Accepted Answer · 2011-10-19 21:00:52Z

5

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

answered Oct 19, 2011 at 21:00

Larry Lustig

51.2k16 gold badges119 silver badges173 bronze badges

6 Comments

dzm Over a year ago

Yeah, probably, but I don't want to use a whole new initialization for each one, will get pretty messy pretty quick.

Larry Lustig Over a year ago

Well, it's pretty tricky to have a separate initialization for each datatable without having a separate initialization for each datatable, which is what you're asking for. You can try having one common initialization based on the class, then separate, smaller initializations with only the source attribute specified, that will allow to not repeat the common code.

dzm Over a year ago

I just updated my post with a solution that seems to be working, what do you think? see any issues?

Larry Lustig Over a year ago

Seems somewhat complex to me, but if you have a lot of them it might make sense. However, rather than using an extra element that way, I'd attach the source to the databable element itself either as a custom attribute or through jQuery.data().

dzm Over a year ago

Good idea, I tried using jQuery.data() however, it seems to not keep the value. Perhaps dataTables removes it? What other attribute do you think would be appropriate?

|

Gjohn · Accepted Answer · 2011-10-19 21:01:20Z

0

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.

answered Oct 19, 2011 at 21:01

Gjohn

1,2811 gold badge8 silver badges12 bronze badges

Comments

Nitesh Mandlik · Accepted Answer · 2017-07-23 12:37:40Z

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.

Collectives™ on Stack Overflow

Multiple DataTables on the same page with different ajax sources

4 Answers 4

Comments

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related