retrieving datatable initialization strings from a file

dinotom

I built an xml file to store my initialization strings for each table. I just find it easier to maintain those in a central place and then call them into the page when necessary. That process works fine for standard init strings, but if I have a function in the string, for example, in render.

 data: 'Date', title: 'Date', searchable: false, orderable: false, width: '15%',<br />
                               render: function (mData) {<br />
                                 &nbsp; &nbsp;  return moment(mData).format('MMMM Do [,] YYYY'); }<br />

I get a javascipt error in those cases. Will doing this work if I refactor the strings so that they call a method instead of having the function in the string itself?

To be more detailed;<br />

This doesn't work even though the init string returned is IDENTICAL to the hard code version below.

var pageName = GetCurrentPageName(true);
    $(".data_table").each(function () {
        var table = $('#' + this.id);
        var searchString = 'webpagename[name ="' + pageName + '"] > tableid[id ="' + this.id + '"]';
          $.when(datatableUtility.GetInitStringXml())
                .done(function (returnedXml) {
                    var initString = $(returnedXml).find(searchString).text();
                    console.log(initString);  //this string is IDENTICAL to whats in hard code version
                    table.DataTable(initString).order([1, 'asc'], [2, 'asc']).draw(); 
                })
                .fail(function (jqXhr, textStatus, errorThrown) {
                    // alert("Error downloading projection data: " + textStatus + " Error: " + errorThrown);
                    toastr.warning('Error downloading datatables initialization string: ' + textStatus + ' Error: ' + errorThrown);
                });
    });

This populates the table just fine on page load;

//this is within doc.ready
 $(".data_table").each(function () {
        var table = $('#' + this.id);
        var searchString = 'webpagename[name ="' + pageName + '"] > tableid[id ="' + this.id + '"]';
        populateTodaysIdeaTable(table);
});
  function populateTodaysIdeaTable(tableSelector) {
        $.when($.getJSON('http://localhost:54594/api/Ideas/GetTodaysIdeas'))
               .then(function (data) {
                   tableSelector.DataTable({
                       data: data,
                       columns: [{
                               data: 'Date', title: 'Date', searchable: false, orderable: false, width: '15%',
                               render: function (mData) {
                                   return moment(mData).format('MMMM Do [,] YYYY');
                               }
                           },
                           {
                               data: 'CompanyInfo', title: 'Company Info', width: '20%',
                               render: function (mData) {
                                   var baseInfo = mData.replace('COMMON', '');
                                   var baseInfoArray = baseInfo.split("(");
                                   var name = toTitleCase(baseInfoArray[0]);
                                   return name + ' (' + baseInfoArray[1];
                               }
                           },
                       { data: 'TradeDirection', title: 'Buy/Sell', searchable: false, width: '10%' },
                       { data: 'Notes', title: 'Trading Notes', orderable: false }
                       ]}).order([1, 'asc'], [2, 'asc']).draw();
               })
               .fail(function (jqXhr, textStatus, errorThrown) {
                   alert('Error posting new idea for: ' + symbEntry.val() + '..' + textStatus + ' Error: ' + errorThrown);
               });
    }

allan

Hi,

How are you storing the function string in your XML, and how then transforming it into the Javascript? If the function isn't being stores in plain text and with in a CDATA section, then I suspect that is where the issue is - the code above has <br /> tags etc in it - is that an artefact of how you've pasted in into the forum, or is that a result of the XML transform that is being performed - as it is invalid Javascript!

Regards,
Allan

dinotom

The br"s I put in to format the code as the [code] tags don't seem to do it. The init strings are stored exactly as json strings in the xmlnode exactly as they worked in the datatable initialization in the page. I cut them from there and put them in the file. I use this procedure in a script manager to load the JavaScript in an update panel table from asp.net and it works fine so the strings coming from the xml are in the right form. It's just not working in the JavaScript shown.

allan

Ah I see - thanks for the clarification. The problem is that initString is a string, not an object. You need to add $.parseJSON() to convert the string into a Javascript object. So it might look like:

table.DataTable( $.parseJSON( initString ) ).order([1, 'asc'], [2, 'asc']).draw();

Regards,
Allan