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

<table id="table1" class="display"> </table>
<table id="table2" class="display"> </table>
<table id="table3" class="display"> </table>

$(document).ready(function() {
  $('table.display').DataTable();
} );

All three tables will be displayed as long as you give the right class

<-- You wrote dataTable instead of DataTable-->

Answer 2

If you have multiple datatables on the single page - check if you are using the following from the examples

"fnServerData": fnDataTablesPipeline

this caches the data from the first call; if the second datatable uses the same function it will see that data has already been fetched and not make the ajax call to retrieve its data. and so you will not receive data to your second(nth) datatable.

Answer 3

HTML such as:

<table id="Table01" class="table"></table>
<table id="Table02" class="table"></table>
<table id="Table03" class="table"></table>
<table id="Table04" class="table"></table>

script such as:

table01 = $("#Table01").DataTable({/* to do somthing... */});
table02 = $("#Table02").DataTable({/* to do somthing... */});
table03 = $("#Table03").DataTable({/* to do somthing... */});
table04 = $("#Table04").DataTable({/* to do somthing... */});