how to put multiple jquery dataTables in one page?

Question

I want to use jquery dataTables to show something.

It works well when i just put one dataTable in one page, then i add one more, but they occupied almost the same p

Answer 1

I'm late to the party but here's the method I ended up using to solve the problem you describe...

$('.testDataTable').each(function() {
        var dataSource = $(this).attr("data-ajaxsource");
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": dataSource
    });
});

You're essentially iterating through your DataTable instances and adding the source set by a data attribute. If you're not familiar with data attributes, they're simply tags applied to an element...

Alternatively, If you don't want to use the HTML5 data attributes, you could use a hidden field within the parent which could be read directly into the sAjaxSource...

$('.testDataTable').each(function() {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": $(this).children('childElement').html()
    });
});