Geek Answers Handbook

Put newlines at a specific jQuery datatable position

DEFAULT
I create an ajax datatable whose rows are sometimes filled with json at the end of the table: jsfiddle , and sometimes at the top of the table. It depends on the ajax response time.

RECOMMENDED OUTPUT
I have two input jsons from two different sources, and the output is a table:

 <table> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> ... <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>8</td><td>7</td><td>6</td></tr> <!-- inserted row--> <tr><td>8</td><td>7</td><td>6</td></tr> <!-- inserted row--> <tr><td>8</td><td>7</td><td>6</td></tr> <!-- inserted row--> <tr><td>8</td><td>7</td><td>6</td></tr> <!-- inserted row--> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> ... <tr><td>1</td><td>2</td><td>3</td></tr> </table>

Rows from 2. json are inserted into the table (created from 1. json) at a specific position. This position is constant, lengths 1 and 2. The json data is constant.

FIRST DECISION
I have to add the first column containing the number and sort the data by them, omitting them - jsfiddle . I can hide the first jsfiddle column, but I rather use a custom function because it does not work in IE8.

 var t = $("#tab1").DataTable({ "ajax": "data1.json", columnDefs: [ { className: "hide", "targets": [ 0 ] }, ], "columns": [ { "data": "id"}, { "data": "cat1"}, { "data": "cat2"}, { "data": "cat3"} ] }); $.ajax({ type: "GET", url: "data2.json", contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { t.rows.add(response.data); t.draw(); } });

IDEA - CUSTOM FUNCTION
I am trying to create a custom function rows.addinposition(rows, position) , but it works like the function rows.add() .
I copied and changed the rows.add function found in jquery.dataTables.js to line 7879 , I changed out.push() to out.splice() splice docs .

I know this is not recommended, it is better to extend datatables api ...

 _api_register( 'rows.addinposition()', function ( rows, position ) { var newRows = this.iterator( 'table', function ( settings ) { var row, i, ien; var out = []; for ( i=0, ien=rows.length ; i<ien ; i++ ) { row = rows[i]; if ( row.nodeName && row.nodeName.toUpperCase() === 'TR' ) { //ROWS.ADD USE OUT.PUSH //out.push( _fnAddTr( settings, row )[0] ); //CHANGED TO OUT.SPLICE out.splice( position, 0, _fnAddTr( settings, row )[0] ); } else { out.splice( position, 0, _fnAddData( settings, row ) ); } } console.log(out); return out; }, 1 ); // Return an Api.rows() extended instance, so rows().nodes() etc can be used var modRows = this.rows( -1 ); modRows.pop(); modRows.push.apply( modRows, newRows.toArray() ); return modRows; } );

It would be great if you could help me.

I found similar questions:

EDIT
Thanks davidkonrad, but I am testing it in jsfiddle and I found 2 problems:

  • the order is wrong 2., 1., not 1., 2. - I think the problem is easy.
  • sometimes these added rows are on the top of the table, sometimes in the correct position. Accidentally. - maybe a big problem.

I am debugging it in jsfiddle and its behavior is very strange:

 console.log('rowCount = '+rowCount);

if the lines are on top (bad position) return:

 rowCount = 0 rowCount = 1

and for did not execute because firebug does not show var i .

if they are in a good position , return:

 rowCount = 5 rowCount = 6

and for and var i returned in this example:
1. loop:

 i = 5 i = 4 i = 3

2.loop:

 i = 6 i = 5 i = 4 i = 3

Did I miss something? Why is the order strange?

+6
source share
2 answers

Decision

I believe you need to use the jQuery $.when to execute the callback when both Ajax calls were successful.

Thus, you always get the data in the same order, and there is no need to write functions to insert data at a specific position.

In addition, if necessary, you can manage the final data before initializing the data table. For example, shown below, these are just two options, the possibilities are endless.

To add data from call2 to data from call1 :

 var data = a1[0].data.concat(a2[0].data);

Insert data from call2 to position 2 data from call1 ( source ):

 var data = a1[0].data; data.splice.apply(data, [2, 0].concat(a2[0].data));

Demo

See the example below for code and demo.

 $(document).ready(function(){ var call1 = $.ajax({ url: "https://api.myjson.com/bins/48g56", type: "GET", dataType: "json", contentType: "application/json; charset=utf-8", }); var call2 = $.ajax({ url: "https://api.myjson.com/bins/1bfa2", type: "GET", dataType: "json", contentType: "application/json; charset=utf-8", }); // When both Ajax requests were successful $.when(call1, call2).done(function(a1, a2){ // a1 and a2 are arguments resolved for the call1 and call2 ajax requests, respectively. // Each argument is an array with the following structure: [ data, statusText, jqXHR ] // Append data from call2 to data from call1 // var data = a1[0].data.concat(a2[0].data); // Insert data from call2 at position 2 of data from call1 var data = a1[0].data; data.splice.apply(data, [2, 0].concat(a2[0].data)); // Initialize data table var t = $("#tab1").DataTable({ data: data, columnDefs: [ { className: "hide", "targets": [ 0 ] }, ], order: [], ordering: false, columns: [ { "data": "id"}, { "data": "cat1"}, { "data": "cat2"}, { "data": "cat3"} ] }); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script> <link href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet"/> <table id="tab1" class='data tab01'> <thead> <tr> <th>id</th> <th>cat1</th> <th>cat2</th> <th>cat3</th> </tr> </thead> <tbody> </tbody> </table>
+3
source

You do not need to directly change the source code, use dataTable.Api.register :

 jQuery.fn.dataTable.Api.register('row.addByPos()', function(data, index) { var currentPage = this.page(); //insert the row this.row.add(data); //move added row to desired index var rowCount = this.data().length-1, insertedRow = this.row(rowCount).data(), tempRow; for (var i=rowCount;i>=index;i--) { tempRow = this.row(i-1).data(); this.row(i).data(tempRow); this.row(i-1).data(insertedRow); } //refresh the current page this.page(currentPage).draw(false); });

The above function (or plugin) inserts a line and then “moves” the line to the desired position simply by replacing the contents → read a more detailed explanation .
Demo → http://jsfiddle.net/p4wcfzfe/

Since the plugin adds a function to the general API, the plugin must be declared before any dataTable can be initialized using this function.

 { plugin declaration } var table = $("#example").DataTable(); table.row.addByPos([data], 1);

NB: your "first solution" should work in IE8 too, try removing trailing commas.

+4
source

More articles:


All Articles