CODEWITHSUNDEEP
javascriptajaxdatatable
Strywyr
Strywyr

Reputation: 250

Cannot reinitialise DataTable, How to Update datatable after submit without reloading the page

I have windows ready ajax datatable but I want to update datatable after adding submit.

Here's my code

window.addEventListener('load', function () {
    const selectValueBatch = document.getElementById('valueBatch').value;
    $.ajax({
        method: 'GET',
        url: "/DIYRate/onLoadCriteria",
        data: { batchID: selectValueBatch },
        success: function (result) {
            var js = result.criTbls;
            var table = $('#crteriaTbl').DataTable({
                "data": js,
                "aLengthMenu": [
                [10, 25, 50, 100, -1],
                [10, 25, 50, 100, "All"]
                ],
                "iDisplayLength": 10,
                "columns": [
                       { "data": "criteriaID" },
                       { "data": "batchID" },
                       { "data": "criteria" },
                       { "data": "description" },
                       { "data": "percentage" },
                       }
                ]
            });
     })

This is what i tried, This is what i see to other post but not working.

   document.getElementById('btnCreateCrit').addEventListener('click', function () {

        const batchID = document.getElementById('batchID').value;
        const criteria = document.getElementById('criteriaName').value;
        const descript = document.getElementById('descript').value;
        const percent = document.getElementById('percent').value;


        $.ajax({
            method: 'POST',
            url: '/DIYRate/criteriaCreate',
            data: { batchID: batchID, criteria: criteria, descript: descript, percent: percent },
            success: function (result) {
                result.stats == 0 ? toastr.error(result.message) : toastr.success(result.message);
                 $('#crteriaTbl').DataTable.ajax.reload();
            }       
        })

Upvotes: 0

Views: 51

Answers (1)

Mohammad Samim Safi
Mohammad Samim Safi

Reputation: 88

first you have to create a function for example loaddata. then put your code that and it loads datatable in function. after that call the function in window.load and also call function in submit success. it will work!

Upvotes: 1

Related Questions