How to reload DataTable from html code - javascript

here's my question, I've got a datatable in html, I have a function replacing the html code of the datatable by an updated one (the same, but with the update database values).
But the probleme is, things like "Display 1 entry from 1 to 1" doesn't update.
I'd like to refresh the whole tab with the new values, and with the data-table functions from.
Any ideas ?
I'm not really clear about how my code is; but basically : it's a html table ruled by php's foreach/if and echoes of values got by requesting a database. So, even while reloading the same html code, there won't be the same values if you add something through the database.
I'll add the fact that there is switchbuttons inside the data-base, and they get also destroy by the html reload.
When I say html reload, I mean this : $('#myTable').html(new_html);
Thank you

Assign your datatable initialize to variable like below
var table = $('#myTable').DataTable();
Then whenever you call your function for table reload make sure you call this function after it finish to run. It is used by datatable to refresh table.
table.draw();

Related

How to reintialize DataTable with dynamic column numbers?

I want to reinitialize the DataTable according to dropdown value changes on the page. if new table column number is equals to former column numbers then everthing is fine. But when the column number is less or more, then it gives me an error.
destroy function doesn't work in this scenario.
If I reload the page with new paramters it is also fine. But i want to solve this problem with ajax call.
Here is an example:https://jsfiddle.net/aaktas/arbcgvhz/24/<script async src="//jsfiddle.net/aaktas/arbcgvhz/27/embed/"></script>
I couldn't find a way inside the DataTable functions. I found a quick solution which is re-creating the html table element like below:
function reCreateTable() {
$('#reportsTable').remove();
$('.table-responsive').prepend('<table id="reportsTable" class="table table-striped" style="width:100%"></table>');
}
If someone can advice any other solution, it would be great.

How to restore the state of a table which had been populated with subsequent XHR query

I have a DataTable table which is populated, in the first place, by a XQuery harvesting the whole set of data in my database. Each record has a hyperlink which takes the user to a 'detail' page. When the user goes back from the detail they should find the table as they left it.
The main page with the table also has an advanced search form, from where the user can filter the results. When submitting the form a JavaScript executes another query, this time via XHR, and repopulates the table.
Now, it all goes well with the full-records table (i.e. when the user doesn't action an advanced search). I have also put a stateSave: true option in the initialisation of the table so that when the user comes back from the 'detail' page finds the table as they left it.
The problem starts when an advanced search is carried out. In that case, when going on the 'detail' page and coming back the table is not there any more, so I need to request a new XHR using the parameter I saved in sessionStorage, which is fine. Then, though, I need to put the table as it was. How do I do that? If I add:
var table = $('#mainTable').DataTable();
$('#mainTable').on('page.dt', function () {
var page = table.page();
sessionStorage.setItem('pageTable', page);
table.state.save()
And then use that page for getting the advanced-search-table to the page the user was consulting with table.page(parseInt(page)).draw('page') after the new XHR query triggered by the 'back' button from the 'detail' page the stateSave: true on the full-records-table gets ignored. Also, I'd like to save things like sorting of columns and the like. Is there an easy way to save the current state of the advanced-search table when the user clicks on the hyperlink, and restore the table exactly as it was when the user goes back, without executing a new advanced-search query behind the scenes, or executing and then reinitialise the table with all the parameters (page, sorting, scrolling) active at the moment the user left the main page to go to the detail page?
For some reason I don't feel this has an easy solution. Restoring the full state of the table after a subsequent XHR query seems like a hassle. I've solved by repopulating the table via the server-side XQuery. That way the stateSave: true gets honoured, no matter the content of the table.

How can I reload the current page in a Webix datatable when using paging?

I am currently using Webix 5.3.4, and I am trying to reload a page in a DataTable after updating one of the items. This is the way I got it to work:
let grid = $$("grid");
grid.clearAll(); // Need to do this
grid.load(grid.config.url, 'json', function(){
grid.refresh()
});
However, this cause the entire table to be wiped clear before the new data is loaded. I need to do grid.clearAll(); or else only the first page is loaded. Is there anyway for me to refresh the current page of a datatable without using grid.clearAll() ?
You can use
grid.loadNext(20, 60);
Which will load 20 rows starting from position 60.
Please be sure that each row has a unique ID, as data without IDs or win non-unique IDs will not be updated correctly.
P.S. Also, in your code grid.refresh is unnecessary, the load command will repaint grid with new data automatically.

How to select the corresponding page of row datatable

I want to preselect a row in my datatable and I am using the row('#rowID').select() function for that. It does select the row but it doesn't select the corresponding page where that row is.
I know there exists an option displayStart:
$('#example').dataTable( {
"displayStart": 20
} );
to start on a specific page, but it requires the number of the row in the source list not the id of that row.
Is there a way how to initialize the page using the rowID?
EDIT: The data is taken from the server, not in client.
Use row().show() API method to display page containing required row.
Please note that you need to include additional JS file //cdn.datatables.net/plug-ins/1.10.12/api/row().show().js for this API method to work.
table.row(1).show().draw(false);
See this example for code and demonstration.

DataTable in Bootstrap not executing jQuery when record reach more than 10?

I used twitter bootstrap for my system. For displaying all of my data from the database, I used dataTables for it. I've added a new column as "Action" that contains 2 buttons, edit and delete. But when the record reaches more than 10 for the first pagination, all of the rows which contains my buttons on the second pagination and next pagination does not execute my jQuery code that handles the delete and edit function.
Can anyone help why is this happening? What are the possible solution for this problem? Really need it. Thanks.
Supposing you bind your delete and edit function on $(document).ready() then the explanation is simple: at that point only the first page is available in the DOM and only the buttons on the first page will bind.
What you need to do is to rebind your events every time you change the page. For this, you need to call your binding jQuery code (let's say you have a method named BindEvents() that does that) on the fnDrawCallback event of your DataTable:
var dataTable = $("#YourTable").dataTable({
// additional data table params,
"fnDrawCallback": function () {
BindEvents();
};
See http://legacy.datatables.net/usage/callbacks#fnDrawCallback for more details.

Categories