Setting $.fn.dataTable.defaults not working

barleby

Hi. I'm pulling my hair with an issue I found I can not resolve:
I have a table which is created using a given Web Component I can NOT modify **in any way (as it's part of my company's library of components).

The thing is the component Initializes a new Table with some parameters, BUT I want to add/extend with some new keys to the configuration options. I wrote the following code in order to push columnsDef without any success:

First HTML loads the plugin:

<script src="datatables.min"></script>

Then HTML has following logic:

    <script>
       $.extend($.fn.dataTable.defaults, {
        "columnDefs": [ {
          "targets": [1],
          "visible": false
        } ]
      } );
</script>

Then, the library component loads with the following code (typescript):

const options = this.getDatatableOptions();
this.api = this.$(tableElement).DataTable(options);

  getDatatableOptions() {
    const options: any = {     
      dom: "Bt",
      buttons: ["copy", "excel", "print"],
      pageLength: parseInt(this.itemsPage, 10),
      paging: this.pagination
    };

And Finally my table loads data:

tablaJS = document.querySelector("#listingTable");
tablaJS.ajax.url("http://localhost:8081/src/js/MOCK_DATA.json").load();

From the code above I was expecting to see column 1 turn invisible according to columnDefs
Anything what I'm doing wrong?

allan

I'm not sure what's going wrong there I'm afraid. It appears to work okay here.

Could you link to a page showing the issue please?

Allan

barleby

Hi Allan. Unfortunately I don't have a public url.
I can add my complete javascript file (the one that reads the data). Maybe it has to do with the way I'm loading these data?.

This javascript is last one loaded in the HTML page:

$(document).ready(function() {

    const mitabla = document.querySelector("mm-listing");

    mitabla.addEventListener("initTableCompleted", function() {
        console.log($.fn.dataTable.defaults.columnDefs);
        tablaJS = mitabla.api;


    $(mitabla).on('xhr.dt', function ( e, settings, json, xhr ) {

        for ( let i=0, ien=json.data.length; i<ien ; i++ ) {
            // Wrap one raw value inside HTML tag
            json.data[i][7] = `<span>${json.data[i][7]}</span>`;
        }


    });
    tablaJS.ajax.url("http://localhost:8081/src/js/MOCK_DATA.json").load();

    });

} );

JSON Mock:

{
    "data": [
      [
        "",
        "1",
        "Tiger Nixon",
        "System Architect",
        "Edinburgh",
        "5421",
        "2011/04/25",
        "$320,800",
        "pepe"
      ],
      [
        "",
        "2",
        "Garrett Winters",
        "Accountant",
        "Tokyo",
        "8422",
        "2011/07/25",
        "$170,750",
        "pepe"
      ],
      [
        "",
        "3",
        "Ashton Cox",
        "Junior Technical Author",
        "San Francisco",
        "1562",
        "2009/01/12",
        "$86,000",
        "pepe"
      ],
      [
        "",
        "4",
        "Tiger Nixon",
        "System Architect",
        "Edinburgh",
        "5421",
        "2011/04/25",
        "$320,800",
        "pepe"
      ],
      [
        "",
        "5",
        "Garrett Winters",
        "Accountant",
        "Tokyo",
        "8422",
        "2011/07/25",
        "$170,750",
        "pepe"
      ],
      [
        "",
        "6",
        "Ashton Cox",
        "Junior Technical Author",
        "San Francisco",
        "1562",
        "2009/01/12",
        "$86,000",
        "pepe"
      ],
      [
        "",
        "7",
        "Tiger Nixon",
        "System Architect",
        "Edinburgh",
        "5421",
        "2011/04/25",
        "$320,800",
        "pepe"
      ],
      [
        "",
        "8",
        "Garrett Winters",
        "Accountant",
        "Tokyo",
        "8422",
        "2011/07/25",
        "$170,750",
        "pepe"
      ],
      [
        "",
        "9",
        "Ashton Cox",
        "Junior Technical Author",
        "San Francisco",
        "1562",
        "2009/01/12",
        "$86,000",
        "pepe"
      ],
      [
        "",
        "10",
        "Ashton Cox",
        "Junior Technical Author",
        "San Francisco",
        "1562",
        "2009/01/12",
        "$86,000",
        "pepe"
      ],
      [
        "",
        "11",
        "Ashton Cox",
        "Junior Technical Author",
        "San Francisco",
        "1562",
        "2009/01/12",
        "$86,000",
        "pepe"
      ],
      [
        "",
        "12",
        "Ashton Cox",
        "Junior Technical Author",
        "San Francisco",
        "1562",
        "2009/01/12",
        "$86,000",
        "pepe"
      ],
      [
        "",
        "13",
        "Ashton Cox",
        "Junior Technical Author",
        "San Francisco",
        "1562",
        "2009/01/12",
        "$86,000",
        "pepe"
      ],
      [
        "",
        "14",
        "Ashton Cox",
        "Junior Technical Author",
        "San Francisco",
        "1562",
        "2009/01/12",
        "$86,000",
        "pepe"
      ],
      [
        "",
        "15",
        "Ashton Cox",
        "Junior Technical Author",
        "San Francisco",
        "1562",
        "2009/01/12",
        "$86,000",
        "pepe"
      ],
      [
        "",
        "16",
        "Ashton Cox",
        "Junior Technical Author",
        "San Francisco",
        "1562",
        "2009/01/12",
        "$86,000",
        "pepe"
      ],
      [
        "",
        "17",
        "Ashton Cox",
        "Junior Technical Author",
        "San Francisco",
        "1562",
        "2009/01/12",
        "$86,000",
        "pepe"
      ]

    ]
}

barleby

If I add a console.log Before and After the Script where my mm-listing component creates the table I can see the columnDef correctly. However the table doesn't seem to refresh these values

allan

Are you able to modify this example to match the behaviour you are seeing?

Thanks,
Allan