Reload datatable object with HTML without destroying it

brigosx

Hi to all,

I've managed to load pure HTML tags (the site I currently work on is designed this way) on a datatable object without needed to destroy it for as long as the structure is the same:

var mytable = $('#tableId').DataTable({
            fixedHeader: true,
            ordering: false,
            sorting: false,
            paging: false,
            searching: false,
            scrollY: topoffs,
            info: false
        });

function ReloadHtml ()
      {
        mytable.clear();
      
        $.get('http://my_url_path/mycgi.exe/refresh', function (rcv) {
            // First we need to "strip" the rcv string from the "TR" tags and build an array with the rest HTML code:
            var rows = rcv.replace(/<[\/]{0,1}(tr|TR)[^><]*>/g, ',').split(',');
            
                      // Next we map each item in the above array in order to apply the HTML code to a DOM TR element
            $.map(rows, function (row_value) {
                if(row_value.trim() != '') {
                    var drow = document.createElement('tr');
                    drow.innerHTML = row_value;
                    mytable.row.add(drow).draw(false);
                }
            });
        });
        
        mytable.draw();
      }

In case you need to change the headers you may do something like the following:

$.get('http://my_url_path/mycgi.exe/refheads', function (rcv) {
            //Parse each <TH> tags and apply its contents to the header column: 
            $(rcv).children().each(function(index, element) {
                var title = mytable.columns(index).header();
                $(title).html(element.innerHTML);
            });
        });

jLinux

Is this a question? Or more of an informative post?

brigosx

Hi jLinux,

Actually it was a problem I faced in my work and I found this solution after digging into many forums (including this one).

It's for information but there is always an open room for a better solution or optimization. For example instead of loading a single row it could be optimized to load the whole pack of rows.

brigosx

One idea that just came to mind was the following:

$.get('<#srvpath>/refresh', function (rcv) {
            //$('#fltlist').html(rcv);
            var rows = rcv.replace(/<[\/]{0,1}(tr|TR)[^><]*>/g, ',').split(',');
            
            var drows = [];
            
            $.map(rows, function (row_value) {
                if(row_value.trim() != '') {
                    var drow = document.createElement('tr');
                    drow.innerHTML = row_value;
                    //mytable.row.add(drow).draw(false);
                    drows.push(drow);
                }
            });
            
            mytable.rows.add(drows).draw(false);
        });
        
        mytable.draw();

However, like I previously said there is always room for better ideas and solutions.

brigosx

Finally I found some problems with the above code snippet. So I've tried to use a bit more of JQuery staff than straight JavaScript:

function ApplyFlightsList (flt_list)
        {
            dtable.clear();
            
            try
            {
                var drows = [];
                
                    $(flt_list+' tr').each(function () {
                        var drow = $(this).get(0);
                        
                        if (drow.innerHTML != undefined) {
                            drows.push(drow);
                        }
                });
    
                dtable.rows.add(drows).draw(false);
            }
            finally
            {
                dtable.draw();
            }
        }

Where the "flt_list" is the HTML string I receive from the CGI module.

Hlodvig

Didn't understand - what if some of attributes on tr or td contains comma? And will such a solution preserve all attributes on cells?

In my solution I just pass function as "ajax" parameter to datatable initializer where I convert response to object data and that pass it to callback, smth like that
(colums pre-filled upon initialization

var newRows = $res.find("tr.row_data");
                                    newRows.each(function () {
                                        var _this = $(this);

                                        var newRowObj = {
                                            "DT_RowId": _this.attr("id"),
                                            "DT_RowClass": _this.attr("class"),
                                            "DT_RowData": _this.data()
                                        };

                                        var tds = _this.children();
                                        for (var i = 0; i < tds.length; i++) {
                                            var $td = tds[i], val = $td.innerHTML;

                                            var colName = columns[i].data;
                                            if (columns[i].render) {
                                                var cellObj = { display: val, sort: val };

                                                var sort = $td.getAttribute('data-sort') || $td.getAttribute('data-order');
                                                if (sort) {
                                                    cellObj.sort = sort;
                                                }
                                                newRowObj[colName] = cellObj;
                                            } else {
                                                newRowObj[colName] = val;
                                            }
                                        }
                                        resdata.data.push(newRowObj);
                                    });

                                    //call callback function
                                    callback(resdata);

brigosx

Hi Hlodvig,

In my job, we use Delphi CGI to build the HTML pages. So the TRs and TDs are just prepared from the server side and then are returned as pure HTML. I know I could use ajax calls and JSON data from the datatable object, but that would mean to change the entire logic of the server module. So I wanted just a way to refresh the datatable object contents with static HTML rows. These rows are kept in the parameter I've passed in my code snippet. So far it seems to work without any problems despite the fact that in the TDs are also nested input tags, anchors and other div elements that may have delimited text for any additional information is required. You were right about the TR's attributes. The first solution (my first post) missed that part. However, by applying the entire DOM TR element (where I used the var drow = $(this).get(0); code) it seems that nothing gets lost (until so far). My apologies for my English since it is not my native language.