AutoFill and KeyTable with Dynamically Generated tables

webmaster-intrigue

Hey guys I am currently working on a project using datatables. I am currently using CreateElement('table') , using .innerHTML to add the </tds> and </trs> then using appendchild to add my table to the dom. My static tables all work fine, these tables do not use the editor and to include the autofill and keytable feature i just need to add {'keys': true, 'autoFill': true} in the properties when initializing the table. However in my Dynamically created tables the two extensions doesn't seem to be working at all, its as if the extensions are not even included. Dynamically generated tables are using the editor. I tried the datatable dubugger but it appears to get stuck when loading the version or uploading the configuration data.

Form my understanding when I am using the editor with datatables I need to add

   autoFill: {
        columns: ':not(:first-child)',
        editor:  editor
    },
    keys: {
        columns: ':not(:first-child)',
        editor:  editor
    },
    select: {
        style:    'os',
        selector: 'td:first-child',
        blurable: true
    },

to my properties to include the features but its as if these lines are not even included at all.
Here is my source code for the initialization for the editor and table of doing this.

    var editor = new $.fn.dataTable.Editor({
    table: '#seoScopeTable',
    /* THIS AJAX JUST CALCULATES THE TOTAL AND PUTS IT TO THE LAST COL*/
    ajax: function (a, b, data, successCallback, errorCallback) {
      var rowID = Object.keys(data.data)[0];
      var updatedData = data.data[rowID];
      updatedData['rowId'] = rowID;
      var excludeProps = ['', 'TOTAL'];
      var totalColData = 0;
      for (var eachDataCell in updatedData) {
        if (excludeProps.includes(eachDataCell)) {
          continue;
        }
        var parsedNumber = parseInt(updatedData[eachDataCell]);
        totalColData += parsedNumber ? parsedNumber : 0;
      }
      updatedData['TOTAL'] = totalColData;
      successCallback({
        'action': data.action,
        "data": [updatedData]
      });
    },
    'idSrc': 'rowId',
    fields: headers.map(function (val, index) {
      return {
        'name': val.split(' ').join().split(',').join('')
      }
    })
  })
  seoScopeTable = $(seoScopeTable).DataTable({
    'dom': "Bfrtip",
    'idSrc': 'rowId',
    'keys': {
      columns: ':not(:first-child)',
      editor: editor
    },
    'columns': headers.map(function (val, index) {
      return {
        'data': val.split(' ').join('').split(',').join('')
      }
    }),
    /*autoFill:{
      'columns': ':not(:first-child)',
      'editor': Teditor
    },*/
   'select': {
      'style':    'os',
      'selector': 'td:first-child',
      'blurable': true
    },
    'data': tableData,
    'ordering': false,
    'paging': false,
    'retrieve': true
  });

Do you guys see any problems with the initialization of the table and editor. Would you suggest anything where I should look to debug this problem?

Thanks

kthorngren

Here is an example with all three extensions:
https://editor.datatables.net/examples/extensions/excel.html

I would start by looking at the browser's console for errors. Then make sure the web page is loading the select, autofill and keytable extensions.

Last I would make sure the editor variable is available within the scope of seaScopeTable. Maybe make it a global variable like in the example. Also your autofill config is referencing Teditor instead of editor. You probably know this but its also commented out.

If this doesn't help then we would need a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

webmaster-intrigue

Hey Kevin, Thanks for the replay. I have made a global variable to store the editor but
it is still not working. How do you go about checking if the select,autofill and keytables are loaded in the browser?. do you check the networking tab? and look for the CDN response?. as for the test case, the datatable is in embedded in a very large project with too much dependencies, I will not be able to provide a test case. any help would be appreciated greatly.

Thanks
Peter

kthorngren

How do you go about checking if the select,autofill and keytables are loaded in the browser?. do you check the networking tab? and look for the CDN response?

Thats one option. But the JS and CSS may be concatenated into one file if the Download Builder was used. In this case you wouldn't see them requested individually. It really depends on your environment and how include files are specified.

If they work on one page but not the other then I would check to see what is different between them. Dynamically loaded data shouldn't matter unless the data is causing errors.

Kevin

colin

How do you go about checking if the select,autofill and keytables are loaded in the browser?

Another way is to run the debugger - that will show what's loaded and the versions.

C

webmaster-intrigue

Hey guys, Thanks for the response, The debugger for me unfortunately doesn't work, it gets stuck on the loading version and uploading configuration options.

right now my problem is the table does not have the autofill or keytable feature at all, its as if they are not even included when the table was initialized. I download the autofill and keytabble JS themselves and added console logs to see if they're even running when I click the table, the console log at the start runs so it means that the library is loaded but nothing happens when I click the table. I am just wondering is it because the html table does not exist ONLOAD of the document, the keytable and autoFill features are not initialized because of this. does anyone know if the HTML table has to be hard coded in before I initialize the datatable itself for these extension features to work.

kthorngren

does anyone know if the HTML table has to be hard coded in before I initialize the datatable itself for these extension features to work.

The example I linked to above is an ajax loaded Datatable. No the data does not need to be hard coded into the HTML.

The only other thing I can think of is to make sure you are loading them in the correct order. They need to follow datatables.js. You can use the order shown in the example.

Kevin

colin

Hi @webmaster-intrigue ,

I've not known the debugger to get stuck before so wondering if that's another symptom. Does it load the main with the options? And it only gets stuck when you click on "Version check"? We're happy to look at your page if you can link to it, or if you can duplicate it in a test case.

Cheers,

Colin

webmaster-intrigue

Hey guys. Thanks for all your help. I have resolved the issue of the keytable and auto fill not working. It was an issue with some legacy code from before, not anything wrong with the initialization data-table itself.

the Keytable feature is not 100% working YAY.

My Current issue is that when I drag the auto feature over a number, none of the feature would work. for example. I would drag on top of one of the numbers. It would have a pop up and I could select the options. The increment/decrements each cell by: however is an empty box. the rest of the options I can select by clicking the arrow, but its not working when I click on them.

are they any common issues that may affect the auto fill feature? any help would be appreciated, Thanks in Advance.

kthorngren

Are you using a styling framework like Bootstrap?

If so did you load the appropriate Autofill styling include files?

If the popup is working but you don't see anything it could be a CSS issue. You can use the Download Builder to verify you have the correct files.

Kevin