Is there any possible to add new row after 2nd/3rd/...nth row in Jquery datatable? I used this method fnAddData([...]). It works as expected. But I need to add record inbetween two rows. Please anyone help me..
2
-
Could you create a jsFiddle showing the problem?Justin– Justin2013-05-20 06:36:44 +00:00Commented May 20, 2013 at 6:36
-
datatables.net/forums/discussion/11899/… He suggests "enable sorting, but disable user sorting and use the aaSortingFixed to force sorting to always occur on a hidden column - your index column. Then when you insert your new row, read the sort index for the row you want to insert the new row after, and set the sort index for the new row to be one higher. Thus it will be inserted into the correct place :-). You will also need to loop over all rows, and increment the sort index for existing rows which are higher than the insert point"Bumptious Q Bangwhistle– Bumptious Q Bangwhistle2013-05-20 09:29:37 +00:00Commented May 20, 2013 at 9:29
Add a comment
|
3 Answers
I share with You what I've done:
// for example you want to insert after the 2nd row
var numberOfRowAfterYouWantToInsert = 2;
var rowAfterYouWantToInsert = $("#yourTableId tr").eq( numberOfRowAfterYouWantToInsert );
var rowsAfter_rowAfterYouWantToInsert = rowAfterYouWantToInsert.nextAll();
var standbyTable = $("<table>");
// remove rows by putting over to a standby table
standbyTable.append( rowsAfter_rowAfterYouWantToInsert );
// just did an empty tr here
var tr = $("<tr>");
// append it
$("#yourTableId").append( tr );
// and put back those removed rows to the original table
$("#tableID").append( rowsAfter_rowAfterYouWantToInsert );
This solution is simple, readable, and the main benefit: it works :) Hope it helps You!
EDIT: I figured out that there is a much simpler solution:
// for example you want to insert after the 2nd row
var numberOfRowAfterYouWantToInsert = 2;
var rowAfterYouWantToInsert = $("#yourTableId tr").eq( numberOfRowAfterYouWantToInsert );
// new row with two cells
var tr = $("<tr><td>asd</td><td>qwe</td></tr>");
rowAfterYouWantToInsert.after( tr );
2 Comments
Lucio Fonseca
It doesn't work for Jquery Datatable. When you sort the table this row is lost.
SzGyD
@LucioFonseca if You don't use $("#yourTableId").trigger("update"); statement after adding row, it will be lost ( if I know well about sorting )
This works for me. Grab the array from the datatable, splice in the value at the index you want, then redraw the datatable. This way if you ever have to do a redraw - the values you appended will still be in the table.
var newRow = [1, 2, 3]; // new row in the datatable
var index = 4; // index for the new row to be added
var currentRows = datatable.data().toArray(); // current table data
currentRows.splice(index, 0, newRow);
datatable.clear();
datatable.rows.add(currentRows);
datatable.draw();
Comments
Add row to your table (where tr it the DOM reference to the table wot you want to insert before your row):
var html = "<tr><td>a</td><td>b</td></tr>";
$(tr).after(html);
Next, reset table using this function (where tbServer is the table id):
function ResetDataTable() {
$("#tbServer thead tr").remove();
var oHeadRow = $(".dataTables_scrollHeadInner").find("table thead tr").clone();
$("#tbServer thead").append(oHeadRow);
var oTbl = $("#tbServer").clone();
oTable.destroy();
$("#tbServer").remove();
$("#divTbl").append(oTbl)
SetupDataTable();
}
