Multiple tables with fixed columns failed

RKDivoii

Dear all,

I followed https://datatables.net/extensions/fixedcolumns/ and successfully initialized fixed column for a single table.

Now I am hoping to have multiple tables with fixed columns on one page and I tried to combine http://datatables.net/examples/basic_init/multiple_tables.html with the FixedColumn Plugin.

However, it turned out that only the column of my last table is able to be fixed.

Here're my codes:

Javascript:

<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="https://datatables.net/release-datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js"></script>
<script type="text/javascript" language="javascript" class="init">

    $(document).ready(function() {
         var table = $('table.display').DataTable( {
                scrollY:        "300px",
                scrollX:        true,
                scrollCollapse: true,
                paging:         false
          } );
               new $.fn.dataTable.FixedColumns( table );

      } );

</script>

HTML:

     <table id="example" class="display" cellspacing="0" width="100%">
     ......
     </table>
    <table id="example" class="display" cellspacing="0" width="100%">
     .....
     </table>
     <table id="example" class="display" cellspacing="0" width="100%">
     .....
     </table>

Any input is genuinely appreciated! Plz help!!