Hi, I am using Data table with angular js

Hi, I am using Data table with angular js

AbdulRehman7430AbdulRehman7430 Posts: 9Questions: 1Answers: 0

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!

Answers

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040

    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

  • AbdulRehman7430AbdulRehman7430 Posts: 9Questions: 1Answers: 0

    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?

  • AbdulRehman7430AbdulRehman7430 Posts: 9Questions: 1Answers: 0

    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"
    });
    });

  • AbdulRehman7430AbdulRehman7430 Posts: 9Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040

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

    The options you can use are documented there.

    Kevin

  • AbdulRehman7430AbdulRehman7430 Posts: 9Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040

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

    Kevin

  • AbdulRehman7430AbdulRehman7430 Posts: 9Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040

    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

  • AbdulRehman7430AbdulRehman7430 Posts: 9Questions: 1Answers: 0

    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 ?

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040
    edited April 2

    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

  • AbdulRehman7430AbdulRehman7430 Posts: 9Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040

    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

  • AbdulRehman7430AbdulRehman7430 Posts: 9Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040

    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

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040

    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

Sign In or Register to comment.