I've tried with no success to implement x-editable in bootstrap datatables, the reason being when i update an element from x editable, the datatable fails to recognize those changes.. i've tried updating the table, destroying it, hidden tags, but the main problem seems to be that the datatables fails to recognize any change after the initialization..
I add the rows via button click, when they get to the table, i run .editable on those elements. they become editable but the sorting and search of the datatables doesnt work..
Can anyone help me?
The problem is that for performance reasons, Datatables caches the table into memory so actually the DOM table is different from the in-memory table. And when you modify the DOM, it doesn't change the table in-memory.
Therefore, Datatables created a function helper : invalidate() that you can apply on a row http://datatables.net/reference/api/row%28%29.invalidate%28%29 (there is a multiple rows version too).
Or you can still use the function data() which is less CPU consuming (recommended).
I would do something like this :
$('.xeditable').on('save', function(e, params) {
var $tr = $(e.target).closest('tr');
var newValue = params.newValue;
//If you didn't save the datatable into a var table, you need to call this line :
//var table = $('#example').DataTable();
table.row(tr).data(newValue);
//Or table.row(tr).invalidate(); which should read from the DOM directly
});
Related
I am working with tabulator (jQuery plugin). I want to re-initialized the tabulator on same div element with different column config and data dynamically. Below is the sample div and script that I am using. I feel that, tabulator not allow to change the column configuration once its render.
$("#sample_div").tabulator(tabulator_display_config);
//initialize and apply tabulator
$("#sample_div").tabulator("setData", table_data.Data);
//load data into the table
You can try to redraw the tabulator after the new initialization
$("#sample_div").tabulator("setData", table_data.Data);
$("#sample_div").tabulator("redraw", true);
I use the destroy function and reinitialize tabulator. It works for me.
$("#sample_div").tabulator("destroy");
$("#sample_div").tabulator(tabulator_display_config);
$("#sample_div").tabulator("setData", table_data.Data);
If you just want to change your column configuration and keep your sorting you could get your current sorting using the getSorters function before updating the columns and data and then resorting:
var sort = $("#sample_div").tabulator("getSorters");
$("#sample_div").tabulator(tabulator_display_config);
$("#sample_div").tabulator("setData", table_data.Data);
$("#sample_div").tabulator("setSort ", sort);
I am reading data from google spreadsheet from multiple sheets and displaying the retrieved data in the tabular format. I am creating table rows having data in an ajax call once data is retrieved i.e.
$tbody.append('<tr><td>'+rows[i][6]+'</td>'+'<td>'+rows[i][0]+'</td><td>'+rows[i][1]+'</td><td>'+rows[i][2]+'</td><td>'+rows[i][3]+'</td><td>'+rows[i][4]+'</td><td>'+rows[i][5]+'</td><td><a id="UpdateLink" href="#">Update</a></tr>');
On the very first run the data appears fine but when I happen to have data from another sheet I see no paging is applied and when I click any header column to perform the sort It displays data from the first sheet.
Upon google It was suggested to use destroy attribute for datatable i.e.
$("#spreadsheetdata).DataTable({
destroy:true
});
but behavior remains the same.
I have also applied
if ( $.fn.dataTable.isDataTable( '#spreadsheetdata' ) ) {
//dataTableInstance = $('#spreadsheetdata').DataTable();
}
else {
dataTableInstance = $('#spreadsheetdata').DataTable( {
paging:true,
ordering:true,
info:true
});
}
but no desirable results.
please guide thanks.
Rather adding the rows with the jQuery append method, you'll need to use the DataTables row.add() method.
If dataTableInstance is the variable you're assigning to your table and rows is the array of data from your Google spreadsheet, this syntax should allow you to append new rows to an existing table:
dataTableInstance.row.add([
rows[i][6],
rows[i][0],
rows[i][1],
rows[i][2],
rows[i][3],
rows[i][4],
rows[i][5],
'<a id="UpdateLink" href="#">Update</a>'
]).draw();
The reason appending the new rows with jQuery doesn't work is that DataTables maintains its own client-side state -- see search(), order(), and page() for examples.
So, if you add rows directly to the table body, they'll disappear as soon as you sort, search, etc.
I'm using jQuery DataTables and want to copy all rows (save in JavaScript array) upon clicking the header checkbox.
I want to find where jQuery DataTables store the HTML for remaining page of rows, so I can navigate through JavaScript then check it there or set property checked to true.
Something like this one.
Other information:
I use data from an ajax source(serverside:false), all data is returned.
When I click page 1, all the rows remain Checked.
SOLUTION
There are many methods that could be used for that purpose. You can use rows().data() to get the data for the selected rows.
Example:
var table = $('#example').DataTable();
var data = table
.rows()
.data();
alert( 'The table has ' + data.length + ' records' );
DEMO
See this jsFiddle for code and demonstration.
I find the generated element by jQuery DataTables using this code, and I can copy the whole tr element that hides when paging the DataTables.
$('#example').DataTable().rows().iterator('row', function(context, index){
var node = $(this.row(index).node());
//node.context is element of tr generated by jQuery DataTables.
});
If you do this:
$('#table').DataTable().rows().data();
you get a lot of unnecessary data.
If you just want the table data you can do this:
$('#table').DataTable().rows().data().toArray();
Using
tableObject.rows().data()
will return all the data from the table.
Set the pageLength:
$('#example').dataTable( {
"pageLength": 50
} );
I try to use Backgrid.js. I have some grid (I just take server-mode example).
This library successfully built a grid for me. But I want map some cells to their equivalent. For example, I have "region_id" column. I want map region_id -> region_name. To complete this task, I subscribed to the event backgrid:rendered.
var grid = new Backgrid.Grid({
/////
collection: issues
});
grid.on('backgrid:rendered', function(g) {
$('tr').each(function (i, row) {
var $row = $(row);
console.log("Q");
});
});
But I get a fail. There is no iterating over rows of my table. But these rows exist in table. What is the problem?
Verify that both of the following is true:
you make a call to grid.render() method
issues variable refers to non-empty collection at the time of rendering
Unfortunately Backgrid fires the rendered event before the header, footer and the table itself are actually on the screen.
So when your event gets triggered there are no rows in DOM yet.
I solved my problem by calling my code after the
grid.render().$el
statement. After this table should be in DOM. At least header row was and that was all I needed.
I am stuck with old version of Backgrid 0.2.6. So bare in mind that my answer is from that perspective.
How can you add rows to a JQuery DataTable without redrawing the entire table?
The behavior I would like is for it to find the correct location (based on the sort) to insert the row into the table while maintaining scroll position of the table and pagination if any.
I was facing the same problem. The solution i found for this were a new function with the name
fnStandingRedraw http://datatables.net/plug-ins/api/fnStandingRedraw.
I added the above code to be able to use this function,
$.fn.dataTableExt.oApi.fnStandingRedraw = function (oSettings) {
if (oSettings.oFeatures.bServerSide === false) {
var before = oSettings._iDisplayStart;
oSettings.oApi._fnReDraw(oSettings);
// iDisplayStart has been reset to zero - so lets change it back
oSettings._iDisplayStart = before;
oSettings.oApi._fnCalculateEnd(oSettings);
}
// draw the 'current' page
oSettings.oApi._fnDraw(oSettings);
};
After that i execute the following commands,
theTable.fnAddData([reply], false);
theTable.fnStandingRedraw();
where,
theTable: is the datatable variable (var theTable = $('#example').dataTable();).
reply: is the information i add to a row of mine datatable. More on http://datatables.net/plug-ins/api/fnStandingRedraw.
The first command adds a row on the table without redrawing it. After this, the new row will not being displayed on the table.
The second command redraws the table, so the new raw will appear, but retain the current pagination settings.
This worked fine for me.
Use dataTable().fnAddData()
http://datatables.net/ref#fnAddData
Example:
http://www.datatables.net/release-datatables/examples/api/add_row.html