用不同的脚本文件重新初始化数据表

Question

I have multiple datatables and created one js in where they have similar setup. I use the class of all tables instead each id of my tables.

What doesnt work is if i want to create a specific jquery for each datatables where they have differences . Some columns are needed not to be selected while others need to be .

So I used the Id for each table but it says cannot reinitialize. I also tried using bdestroy :true but one is being disabled

Here is my uniform script where i use the class :

<script type="text/javascript">         
$(document).ready(function () {
$('.datatables').dataTable(     
    {        
       'initComplete': function(settings){
      var api = new $.fn.dataTable.Api(settings);

      api.columns().header().each(function(column){
         if($(column).text() === 'Company'){
            $(column).text("Apple");
         }
          if($(column).text() === 'Note'){
            $(column).text("Description");
         } }); },
     "pagingType": "full_numbers",
             "oSearch": {"bSmart": false},
  dom: '<"coll"B><"search"f><"table"t><"info" i><"list"l><"pag"p>',

buttons: [{          
        extend: 'collection',
        text: 'Esporti',        
  buttons: [ {
            extend: 'excel',
            text: 'Excel',
            exportOptions: {
                modifier: {
                    selected: true
                            }}},{
            extend: 'pdf',
            text: 'PDF',
            exportOptions: {
                modifier: {
                    selected: true
                            }}} ]}, ]
        });  });
</script>

Here is the script for each page where i use the table id of each tables :

<script>
$(document).ready(function () { 
$('#circuiti_table').dataTable({
      select: {
        style: 'multi',
        selector: ' tr>td:nth-child(4), tr>td:nth-child(5), tr>td:nth- child(6), tr>td:nth-child(7)'
      } });  }); 
    </script>

thanks in advance

Answer 1

Instead of using a combination of class name to specify common options and ID to specify unique options I would recommend a different approach.

Use $.fn.dataTable.defaults object to specify common options for all tables. Then on each page, initialize a table using ID but only include options that are different.

For example:

// jQuery DataTables: Common settings
$.extend( true, $.fn.dataTable.defaults, {
    "searching": false,
    "ordering": false
} );

// jQuery DataTables: Individual table
$(document).ready(function() {
    $('#example').DataTable();
} );

See Setting defaults for more information.