DataTables will not run ajax code when the browser is refreshed.

toddstevenson

I have a table that works great except when I refresh the browser. It refreshes, leaving the table blank on the screen. This table is propulated with server side processing with an ajax call. In debugging the code I can see that the 'data', 'dataFilter' functions are never invoked. What do I need to do to process the table when the browser refreshes.
I am using DataTables 1.10.0, AngularJS 1.2.13. I am using Chrome, but IE 10 gives me the same symptom.

My table declaration:

      var dataTable = table.dataTable({
          "retrieve": true,
          "lengthMenu": [ [10, 30, 50, -1], [10, 30, 50, "All"] ],
          "serverSide": true,
          "paging": true,
          "searching":false,
          "pageLength": 30,
          "columns": [ {
            "sTitle": "NCID"
          }, {
            "sTitle": "Representation"
          } ],
          "dom": '<"top"if>rt<"bottom"lp><"clear">',
          "ajax": {
              // set up input parameters
              "data": function(data) {
                  var length = table.dataTable().api().page.len();
                  var url = baseUrl + '/' + data.start + '/' + length;
                  table.dataTable().api().ajax.url(url);
                  draw = data.draw;
                  return {};
              },
              "url": baseUrl, //will be reset by data function
              "dataFilter": function(data,type) {
                          .....
                  var results = {};
                  results.draw = draw;
                          .....

                  return JSON.stringify(results);
              },
              "dataSrc": function(data) {
                              ......
                  table.addClass('table table-condensed');
                  $anchorScroll();
                  return transformRelDataForTable(data.data);
              }
          }
        });

allan

Can you link to a test page showing the issue please? I'm not aware of any issue in this area, so I would need to be able to debug the problem.

Allan

toddstevenson

I can't. I'm behind a firewall.

allan

I'm afraid there is very little help I can offer in that case as I don't know what would cause this issue. Perhaps you could use JSFiddle, DataTables live or CodePen to recreate the issue so it can be debugged.

Allan

toddstevenson

I found and fixed the problem. It was external to dataTables. It was cause by a silent failure to access the table. My code:

$('#' + relPosition).dataTable({.....});

silently failed because the table referenced by jquery did not yet exist because it was part of a ng-repeat clause and Angular had not yet rendered that node on the DOM. In stepping through the dataTable code I noticed that it short circuited everything because the table did not exist (properly so), but it would have been very helpful to have the dataTable code throw an exception in this case. It would have saved me days of trouble.

allan

but it would have been very helpful to have the dataTable code throw an exception in this case

I've wondered that as well in the past, but it is not how jQuery plug-ins work. For example $('#nonexistantId').css('color', 'red'); will just carry on. For consistency with other jQuery plug-ins I've got DataTables doing the same thing.

Good to hear that you've got it working now :-)

Allan

toddstevenson

However, Javascript will throw exceptions for unknown variables or properties, letting the developer know he needs to fix his code. These exceptions are somewhat silent, in that they only appear on the developers console and not in the browser. This is the type of exception that would be valuable to the developer.

allan

Yes, Javascript does - for example false.notHere will throw an error - but jQuery practice is to not when an element doesn't exist. For example, if you have no p tags on the page, should $('p').css('color', 'red'); throw an error. jQuery style says no since the function executed successfully - it just had nothing to do!

I most certainly see your point! But I think it would break the jQuery style, which is probably not a good thing for a jQuery plug-in to do...

Allan