is it possible to add multiple -s generated using template via `rows.add()`?

JoshuaB

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown: NA
Description of problem:
similar to https://datatables.net/reference/api/row.add(), is it allowed to add:
- multiple html <tr>-s (1000s) generated using underscore.js template (needed for custom styling/value formatting for td-level),
- and converting html string content stored in a var tmplate_result to jquery object as $(tmplate_result) via dtable.rows.add($(tmplate_result)).draw()?
(Note: adding individual html <tr> content, seems to be very slow, set of 1000-tr takes about 700s)

kthorngren

This is from the rows.add() docs:

Each data element may be an array, object, Javascript object instance or a tr element.

I built a simple test case to show this works:
http://live.datatables.net/fosadijo/1/edit

I would start by looking at the console for errors and at tmplate_result to make sure the HTML structure matches the table structure.

Kevin

JoshuaB

thank you @kthorngren or a <tr> element. is bit ambiguous for me; does it allow passing only a single instance of <tr> element or passing array/ chunks of (100s or 1000s) of <tr> elements generated through _.template & converted to jquery.

(Note: passing the entire set of ~10k <tr>s generated by _.template to $elem.DataTable(cust_opts) was causing memory in chrome browser, but it's working fine in firefox)
So I'm trying to batch the <tr>-s in chunks of 1000-rows

kthorngren

a <tr> element. is bit ambiguous for me

Basically you need a properly formatted HTML row, ie, <tr><td>celldata</td><td>celldata</td></tr> for each row to add. You need to supply all of the columns for each row. Place all the rows in a string. The example I provided has two rows within a string:

 var rows = '<tr><td>Ashton1 Cox</td><td>Technical Author</td>=<td>San Francisco</td><td>66</td><td>2009/01/12</td><td>$4,800</td></tr>' +
      '<tr><td>Ashton2 Cox</td><td>Technical Author</td>=<td>San Francisco</td><td>66</td><td>2009/01/12</td><td>$4,800</td></tr>';

passing the entire set of ~10k <tr>s generated by _.template to $elem.DataTable(cust_opts) was causing memory in chrome browser, but it's working fine in firefox)

There are other threads , like this one, with a similar problem description.

Kevin

JoshuaB

thanks @kthorngren, as suggested, I concatenated all row-template result-string (ensured all <td>-s are matching to the previously added rows), and tried below options:
- passed it as raw string datatable.rows.add(template_result)
- passed it as warpperd-jquery obj: datatable.rows.add($(template_result))

getting same error as below

Requested unknown parameter '1' for row 4002, column 1. For more information about this error, please see http://datatables.net/tn/4

(currently its not feasible, to change the existing client-side DOM loading to ajax based server-side loading)

kthorngren

You will want to use the jQuery object, ie $(template_result).

Requested unknown parameter '1' for row 4002, column 1.

You will need to look at the template_result string to debug. Basically the error is saying that the data being added as row 4002 into the table has a problem. Lets say your table has 4000 rows (0-3999). You will need to look at the 3rd row in the template_result string.

Maybe you can post the portion of the string that is causing you problems. Or better a test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

I changed the test case to use a DOM sourced table. My suggestion is to experiment with this test case by taking a few rows of template_result and changing the table's structure to match yours to see if you can get it working or post the updated test case so we can take a look.
http://live.datatables.net/cegimaba/1/edit

Kevin

JoshuaB

thanks Kevin - @kthorngren
You will need to look at the template_result string to debug
I had tried to add additional rows thru (api-doc comment)[https://datatables.net/reference/api/row.add()] dtable.row.add($(template_result)).draw(false) rows are getting added without error.
but, its extremely slow (for 100 rows, Firefox took 43s & Chrome: took 120s)

So when I tried to split dataset into smaller chunks(1000) rows [concatenated template_result into a string rchunk], and add it using:
dtable.rows.add($(rchunk)).draw(true)
I'm getting the error:
Requested unknown parameter '1' for row 4002, column 1.
but, the <tr> contents generated in template_result is same!

kthorngren

I've shown an example of how it works. Its impossible to debug at this point with out seeing the problem. As I asked before either post a link to a test case showing the issue or at a minimum post the portion of the template_result data that isn't working.

for row 4002

How many rows are in the table when trying to use rows().add()? This will tell you where to start looking in template_result.

concatenated template_result into a string rchunk

I'm not sure what this is. Maybe there is an issue with this process that is resulting in a string that has extra characters or other issue.

Have you tried hard coding a string with a few rows, like my examples, and adding them with rows.add()?

Kevin

JoshuaB

Thanks Kevin @kthorngren the issue was with extra white-space chars that were present in the template_result (after removing them by template_result.trim().replace(/[\n]+/g, '').replace(/[\s+]/g, ' ')
before concatenating it to the rows_chunk, adding chunks of rows are getting added without any error. Pls refer to the
updated test case

JoshuaB

updated test case
Now the data is getting added thru dt.rows.add($(rchunk)).draw(true) as chunks of 200rows(page-size)
but, after adding 8400 rows, getting the below JS Violation messages & function is getting terminated

[Violation] 'setTimeout' handler took 219923ms
[Violation] Forced reflow while executing JavaScript took 47ms

Any suggestions to avoid this?

kthorngren

Its hard to say without seeing what you are doing. It doesn't sound like a Datatables issue but possibly how you are fetching and processing the chunks of data. I would start by researching on Stack Overflow some ideas of how to resolve the issue. Something like this thread.

Kevin

JoshuaB

except for the updated test-case kindly ignore/delete my last comment.