Loading thead+ tbody by ajax + json

Nark0tiX

**Hi sorry something went wrong i posted this question 2 times, the other one can be deleted maybe? **

Hi Guys,

I really like all the options DataTables offer, but i have an problem:

The following works: (loads my datatable with json which contains table header names + data for in tbody):

            $.ajax({
                "url": 'java/medewerkers.json',
                "dataType": 'json',
                "success": function (json) {
                    var table = $('#customersTbl').DataTable(json);
                }
            });
        });

// json:

{
  "columns": [
    {
      "title": "Firstname",
      "data": "employee_name"
    },
  ],
  "data": [
    {
      "id": "cb0_1034400",
      "employee_name": "Ha",
      "employee_firstnames": "Har",
      "employee_surname": "Bos",
      "employee_gender": "m",
      "employee_mobile": "06 53",
      "employee_emailaddress": "h@g.com"
    }
  ]
}

But when i want to add this to my live project which contains alot of parameters and settings in the datatable like so:

 function toDataTable(json) {
            var table = $('#customersTbl').DataTable({
                data: json,
                buttons: [
                    {
                        extend: 'colvis',
                        text: '<i class="fa fa-wrench"></i>',
                        init: function (api, node, config) {
                            $(node).removeClass('btn-secondary')
                            $(node).addClass('btn-outline-secondary')
                        }...

or something like:

 var table = $('#customersTbl').DataTable({
              "ajax": {
                "url": "path/path.json",
                 dataSrc:'tried every way mentioned on the website.'
                 },
                buttons: [
                    {
                        extend: 'colvis',
                        text: '<i class="fa fa-wrench"></i>',
                        init: function (api, node, config) {
                            $(node).removeClass('btn-secondary')
                            $(node).addClass('btn-outline-secondary')
                        }....

It just doesn't work, tried everything i could find or come up with.. I only get the following error:
VM817 jquery.dataTables.min.js:66 Uncaught TypeError: Cannot read property 'aDataSort' of undefined.

I tried every suggestion on the website. Put the ajax function in the datatable func.
With or without on succes. with type: json etc etc tried everything.

Any suggestion guys?

Nark0tiX

I could not find this in any documentation but this seems to work guys:

      function toDataTable(json) {
            var table = $('#customersTbl').DataTable({
                    columns: json.columns,
                    data: json.data
                 ,buttons: [ { .............

allan

Yes - its in the FAQs .

Allan

Nark0tiX

oke well not easy to find in any documentation tho..

Anyway glad it works ! hope others can use this topic to find out how it works.

Nark0tiX

Just one more problem, sorting the columns doesn't seem to work.

VM4431 datatables.min.js:306 Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.

Any suggestions? i have not been able to find the cause.

allan

I would need a link to the page showing the issue please so it can be debugged.

Allan

Nark0tiX

Hmmm what would you like to see?

I got the JS file which i'm experimenting with uploaded to pastebin:

https://pastebin.com/srF7GSEV

the html is just a default table with an empty row in the thead and the following classes: table table-striped table-bordered table-hover

Everything works as expected, just the col-reorder gives the error mentioned above.

Nark0tiX

I found "live.datatables" and reproduced my problem there:

edit this is the right version: http://live.datatables.net/jopayega/2/edit

maybe thats easier to debugg?

Thanks in advance.

kthorngren

Your example seems to work. I made a couple changes to show the column search seems to be working:

1. Commented out stateSave
2. Commented out the lines hiding the DT info
3. Added a second record to the data

Updated example here:
http://live.datatables.net/jopayega/3/edit

Kevin

Nark0tiX

Sorry i didn't mean sort but "col reorder"
When you reorder the cols you get an error in console. mentioned above.

Excuse me.

Nark0tiX

Please also tell me if you can't find whats wrong. then i know its not just me hehe

kthorngren

Your test case does show the issue. I'm not sure what the issue is. @allan or @colin would need to take a look.

Kevin

Nark0tiX

Oke thanks for your time!

colin

It's something to do with the footer - this modified example here, with the footer removed and the columns added, works as expected. Once you put the footer back in, you get the error on column reordering. Over to @allan ...

allan

How odd! It doesn't like the fact that the cells in the footer are empty. Putting a text node in them allows it to work as expected.

Allan

allan

Here we go. DataTables doesn't like the empty tr elements. It doesn't inspect them to see if they have content or not (and then create it if not). It just assumes that if there is a tr then it is correct for the table and no extra columns need to be added.

Allan

Nark0tiX

Thank you verry much !!!

Not sure how you found out lol, but you deff made my day.