Hi, I am using Data table with angular js

AbdulRehman7430

I am facing issue when i want to refresh data table when scope list change . datatable.ajax.reaload() giving error and doest not reload datatabe.
Please Help!

kthorngren

datatable.ajax.reaload() giving error and doest not reload datatabe.

Start with letting us know what the error is. If the error has an information link use the steps in the link to help troubleshoot the issue.

Kevin

AbdulRehman7430

I have not use ajax to load data in my data table, i used angular js scope list to populate data. When scope list changes then how i can referesh or reload data?

AbdulRehman7430

Below is the code snippet how i initialize my data table.
Please help me to refresh this data table.
angular.element(document).ready(function () {
$.fn.DataTable.ext.pager.numbers_length = 5;
cdTable = $('#Contacts')
cdTable.DataTable({
"language": { "lengthMenu": "Show Records MENU " },
"pageLength": 5,
"pagingType": "full_numbers",
"infoEmpty": "No records available"
});
});

AbdulRehman7430

Here is the warning when i am re initializing data table when my list is updating.

DataTables warning: table id=Contacts - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

please help.

kthorngren

Did you follow the steps in the link provided?
http://datatables.net/tn/3

The options you can use are documented there.

Kevin

AbdulRehman7430

Yeah, I destroy datatable then re initialize it.. but want to know is there any better option to do it?

kthorngren

You can try rows().invalidate() after angular.js populates the table. This will tell Datatables to refresh its data cache.

Kevin

AbdulRehman7430

rows().invalidate() is refreshing rows perfectly but pagination is not refreshing with this?

kthorngren

Look for errors in the browser's console. If this doesn't help then we will need a link to your page or a test case to take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

AbdulRehman7430

No its no causing any error in console.
rows().invalidate() is working perfectly but its not refreshing DataTable pagination .
Only pagination issue is remaining after using this rows().invalidate() .

Is there any option to refresh pagination in datatable ?

kthorngren

Every environment is different. Without seeing what you are doing its hard to say. Make sure you are using rows()/invalidate() after you update the table.

EDIT: Also make sure you are using draw() like the examples.

Kevin

AbdulRehman7430

Please check the below JS Fiddle Link for my datatable implementation.

https://jsfiddle.net/AbdulRehman7430/Lqb8pfvw/2/

To check the issue please delete record by clicking on delete button, pagination will not be reset.

Please help me to overcome this issue.
Thanks in advance.

kthorngren

I removed the use of Datatables with your table and when deleting a row only that row remains in the table:
https://jsfiddle.net/rgchjam6/

You could simply use row().remove(), like this:
https://jsfiddle.net/rgchjam6/2/

Kevin

AbdulRehman7430

Yes row().remove is working, but you have deleted row from table but my $scope was updating from the data base.

And this is one case for delete i have few more cases in which i want to re-fresh the tables. eg. edit data through modal pop up.

I will be very thankfull to you.

kthorngren

The problem is when deleting the row the only item left in the HTMl table is the row I clicked to delete. You can use rows().invalidate() but you first need to get the table to work. Without Datatables your table shows 12 rows. After clicking delete I would expect it to show 11 not just 1.

Kevin

kthorngren

I looked at this more and found, by inspecting the page, that your code rebuilds the tbody when deleting a row. According to this thread the invalidate() methods won't revalidate the new tbody. This means you will need to use destroy() instead.

I had to do three things to get your example working:

1. Change $scope.data= $scope.data.splice(indx , 1); to $scope.data.splice(indx , 1); to keep all the rows other than the deleted row.
2. Use $.fn.dataTable.isDataTable() and destroy() in the deleteRecord event. This is to remove all Datatables listeners, etc before invoking the table changes.
3. Reinitialize the Datatable in the onInt event. I also had to add a slight delay before reinitializing the Datatable. Otherwise it initializes too quickly and finds the old, stale data before its removed.

A better option for number 3 is to use a callback to reinitialize the Datatable after $scope.data.splice(indx , 1); executes. I'm not familiar with Angualr so don't knwo what this would be,

Someone else more familiar with Angular might have a better solution. Look at the Angular support forums. Also something like this might be useful for you:
https://l-lin.github.io/angular-datatables/#/welcome

Kevin