how to put multiple jquery dataTables in one page?

It is possible with server side processing. I have it working in a number of locations in my application. You just need to follow the example code for the server side processing multiple times...

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "../examples_support/server_processing.php"
    } );
} );

replacing #example with #id-of-your-table and "sAjaxSource": "../examples_support/server_processing.php" with "sAjaxSource": "url/to/your/server/side/script".

My guess is that you used the .dataTable selector from the multiple tables example. Which will apply the same setup to all tables with the dataTable class.

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.

select selector by class i have two or more table and i want init all off theme with one config you can set for all table a class such as:

<table class="mytable">
<table class="mytable">
...
...
...

and init theme such as:

    $('.mytable').DataTable({
        order: [[0, "desc"]],
        language: {
            "lengthMenu": "نمایش  _MENU_ ردیف در هر صفحه",
            "zeroRecords": "متاسفیم هیچ کاربری مطابق با اطلاعات درخواست شده یافت نشد",
            "info": "نمایش برگه _PAGE_ از  _PAGES_  از _TOTAL_  کاربر",
            "infoEmpty": "هیچ اطلاعاتی یافت نشد",
            "infoFiltered": "(فیلتر شده از _MAX_ کاربر)",
            "search": "جستجو:",
            "paginate": {
                "first": "نخست",
                "last": "آخرین",
                "next": "بعدی",
                "previous": "قبلی"
            },
        },
    })

This answered is inspired from(@TinkeringTurtle) one of the answers in this thread.

let dt_columns = ["columns for table1", "columns for table2", "etc"];
let tables = [];
$('.table').each(function(i, el) {
    var dataSource = $(this).attr("data-ajaxsource");
    var columns = dt_columns[i];
     tables[i] = $(this).DataTable({
      "processing": true,
      "serverSide": true,
      "ajax": {
          "url": dataSource,
          "type": "POST",
          "data":{
            "month": function(){return $("#select_month").val()},
            "year": function(){return $("#select_year").val()},
          }
      },
      "columns": columns
    });
});
/* reload datatable */
$("#select_month, #select_year").change(function(){
  console.log(tables);
  tables.forEach(function(el, i){
    el.ajax.reload();
  });
});

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... */});