REFRESH Datatable when click new page button (Pagination)

tirampaci · July 2020

** var table = $('#DataTableJs').DataTable({
"dom": '<"col-lg-2 col-md-3 col-sm-6 col-xs-12 ttl"f><"col-lg-10 col-md-9 col-sm-6 col-xs-12 ttr"BC>rt<"col-lg-3 col-md-3 col-sm-3 col-xs-12 tbl"p><"col-lg-6 col-md-6 col-sm-6 col-xs-12 tbm"i><"col-lg-3 col-md-3 col-sm-3 col-xs-2 tbr"l><"fo-clear">', // Grid Design
"colReorder": true,
"responsive": true,
"pageResize": true,
"bAutoWidth": true,
"autoWidth": true,
"fixedHeader": false,
"select": true,
"aaSorting": [],
"language": {
"sDecimal": ",",
"sEmptyTable": "There is no data",
"sInfo": "TOTAL data START - END is between. ",
"sInfoEmpty": "No Data",
"sInfoFiltered": "(MAX data)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "MENU",
"sLoadingRecords": "Loading...",
"sProcessing": " in progress...",
"sSearch": "",
"sSearchPlaceholder": "Filtrele",
"sZeroRecords": "There is no data",
"oPaginate": {
"sFirst": "First",
"sLast": "Last",
"sNext": "Next",
"sPrevious": "Previous"
},
"oAria": {
"sSortAscending": ": ",
"sSortDescending": ": "
},
"select": {
"rows": {
"_": "%d ",
"0": "",
"1": "1 "
}
}
},
"buttons": [

                    {
                        extend: 'selectAll',
                        text: '<i class="fo-icon-checkbox"></i>',
                        attr: { id: 'buttonSelectAll', }
                    },
                    {
                        extend: 'selectNone',
                        text: '<i class="fo-icon-checkbox-blank"></i>',
                        attr: { id: 'buttonSelectNone', }
                    }
                ],
                // Grid Action Buttons Area

            })

            $("#DataTableJsFilter").append($("#DataTableJs_filter"));
            $(".dataTables_filter > label > input").removeClass("form-control");
            $('.dataTables_filter input').attr('placeholder', 'Filtrele');

**:
I cant reload:

** I am using datatable to list my data. It is working well but in my system there is lots of data more than 1 million so i want to list them like 100 - 100 - 100 one page has 10 data firstly i have 10 different page like this.

I want to list them like when the user second button page then i want to go to the Controller to reload page with new data then my new page will be seen 2 to 11 when the user click 3 button then the new page will be 3-12 when the click 4 then page will be 4-13

But I cant refresh my data. My datatable look like this. What i should do . I send data from Controller it is working well in first time . When i click next button or click page button it cant reload datatable with new data.

I can find which button user click everything is fine but hw can I reload dattable with new data it is coming from controller?

Thank you so much for you help. **:

colin · July 2020

It sounds like you need to use server side processing, i.e. enable serverSide. The protocol is discussed here. Also see examples here.

Cheers,

Colin

tirampaci · July 2020

Hi Colin ,

My datatable is this ;

$(document).ready(function () {
var tableId = 'dataTableCheckboxJs'; // Add the ID of your table here.
var table = $("#" + tableId).DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": '@Url.Content("~/Admin/GetAllUsersData")',
"dataSrc": "",
"datatype": "json",
"type":"GET"
}, // Add the table data here.
'columnDefs': [{
'targets': [0],
'searchable': false,
'orderable': false
}],
"columns": [
{ data: 'id' },
{ data: 'PhoneNumber' },
{ data: 'PackageName' },
{ data: 'SUBSCRIPTIONDATE' },
{ data: 'BILLMONTH' },
{ data: 'BILLPERIOD' },
{ data: 'BILLAMOUNT' },
{ data: 'PACKAGEFIXEDFEE' },
{ data: 'PACKAGETOTALPRICE' },
{ data: 'STATUS' },
{
"render": function (data, type, full, meta) { return '<a class="btn btn-info" href="/DemoGrid/Edit/' + full.id + '">Edit</a>'; }
}
],
'order': [1, 'asc'],
"dom": '<"fo-table-actions" <"col-lg-2 col-md-3 col-sm-6 col-xs-12 ttl"f><"col-lg-10 col-md-9 col-sm-6 col-xs-12 ttr action-buttons">>rt<"col-lg-3 col-md-3 col-sm-3 col-xs-12 tbl"p><"col-lg-6 col-md-6 col-sm-6 col-xs-12 tbm"i><"col-lg-3 col-md-3 col-sm-3 col-xs-2 tbr"l><"fo-clear">', // Grid Design
"colReorder": true,
"responsive": false,
"pageResize": true,
"bAutoWidth": true,
"autoWidth": true,
"fixedHeader": false,
"select": false,
"aaSorting": [],
language: {
"sDecimal": ",",
"sEmptyTable": "Tabloda herhangi bir veri mevcut değil",
"sInfo": "TOTAL kayıttan START - END arasındaki kayıtlar. ",
"sInfoEmpty": "Kayıt yok",
"sInfoFiltered": "(MAX kayıt içerisinden bulunan)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "MENU",
"sLoadingRecords": "Yükleniyor...",
"sProcessing": "İşleniyor...",
"sSearch": "",
"sSearchPlaceholder": "Filtrele",
"sZeroRecords": "Eşleşen kayıt bulunamadı",
"oPaginate": {
"sFirst": "İlk",
"sLast": "Son",
"sNext": "İleri",
"sPrevious": "Geri"
},
"oAria": {
"sSortAscending": ": artan sütun sıralamasını aktifleştir",
"sSortDescending": ": azalan sütun sıralamasını aktifleştir"
},
"select": {
"rows": {
"_": "%d kayıt seçildi",
"0": "",
"1": "1 kayıt seçildi"
}
}
}
});
// Turkish Charachter Problem Filter
$("#" + tableId + "_filter input").keyup(function () {
table
.search(
jQuery.fn.DataTable.ext.type.search.string(this.value)
)
.draw();
});

    $('#dataTableCheckboxJs_filter input[type=search]').attr('placeholder', 'Filtrele');







    this.fnFilter = function (sInput, iColumn, bRegex, bSmart, bShowGlobal, bCaseInsensitive) {
        var api = this.api(true);

        alert("ddedede");

        api.draw();
    };



    // Direct delete row
    //$('#dataTableCheckboxJs').on("click", ".delete-row", function () {
    //    console.log($(this).parent());
    //    table.row($(this).parents('tr')).remove().draw(false);
    //});

    // Delete with confirm window
    $('#dataTableCheckboxJs tbody').on('click', 'tr td .delete-row', function () {
        var row = $(this).parents('tr')[0];
        var mydata = (table.row(row).data());
        var con = confirm("Are you sure you want to delete this row? " + "[" + row.cells[2].innerHTML + ", " + row.cells[3].innerHTML + "...]")
        if (con) {
            table.row($(this).parents('tr')).remove().draw(false);
        }
        else {
        }
    });

    var selectAllInput = "<input name='select_all' value='1' type='checkbox' id='" + tableId + "_selectAll' />";
    $('#selectAllCheckbox').html(selectAllInput);

    $("#" + tableId + "_selectAll").on('click', function () {
        var rows = table.rows({ 'search': 'applied' }).nodes();
        $('input[type="checkbox"]', rows).prop('checked', this.checked);
    });

    $(tableId > 'tbody').on('change', 'input[type="checkbox"]', function () {
        if (!this.checked) {
            var el = $("#" + tableId + "_selectAll").get(0);
            if (el && el.checked && ('indeterminate' in el)) {
                el.indeterminate = true;
            }
        }
    });

    //$('.dataTables_filter input').attr('placeholder', 'Filtrele'); // To replace the placeholder in the filtering section
    $(tableId).wrap("<div class='fo-overflow-x-table'></div>");
    $("#" + tableId + "_ActionsButtons").appendTo($(".action-buttons"));

    $(function () {

        // Button event for checked rows data
        $("#getSelectedRowData").click(function () {
            var message = "Selected data\n";
            //Loop all checked checkboxes in datatables.
            $("#" + tableId + " input[type=checkbox]:checked").each(function () {
                var row = $(this).closest("tr")[0];
                message += row.cells[2].innerHTML;
                message += "   " + row.cells[3].innerHTML;
                message += "   " + row.cells[4].innerHTML;
                message += "   " + row.cells[5].innerHTML;
                message += "\n";
            });
            alert(message);
            return false;
        });
    });

    var selectAllInput = "<input name='select_all' value='1' type='checkbox' id='" + tableId + "_selectAll' />";
    $('#selectAllCheckbox').html(selectAllInput);

    $("#" + tableId + "_selectAll").on('click', function () {
        var rows = table.rows({ 'search': 'applied' }).nodes();
        $('input[type="checkbox"]', rows).prop('checked', this.checked);
    });

    $(tableId > 'tbody').on('change', 'input[type="checkbox"]', function () {
        if (!this.checked) {
            var el = $("#" + tableId + "_selectAll").get(0);
            if (el && el.checked && ('indeterminate' in el)) {
                el.indeterminate = true;
            }
        }
    });

    //$('.dataTables_filter input').attr('placeholder', 'Filtrele'); // To replace the placeholder in the filtering section
    $(tableId).wrap("<div class='fo-overflow-x-table'> </div>");
    $("#" + tableId + "_ActionsButtons").appendTo($(".action-buttons"));

});

tirampaci · July 2020

And my controller is this ;

var commonList = _unitOfWork.Common.GetAll();

            var statusInfo = _unitOfWork.StatusInfo.GetAll();

            if (commonList != null && statusInfo != null)
            {
                var usercommondata = (from com in commonList
                                      join stInfo in statusInfo on com.STATUS equals stInfo.ID
                                      select new UserPhoneInfoDTO
                                      {
                                          id = com.ID,
                                          PhoneNumber = com.PHONENUMBER,
                                          PackageName = com.PACKETNAME,
                                          SUBSCRIPTIONDATE = com.SUBSCRIPTIONDATE.ToString("dd/MM/yyyy"),
                                          BILLMONTH = Convert.ToInt32(com.BILLMONTH),//fatura ayı
                                          BILLPERIOD = com.BILLPERIOD.ToString("dd/MM/yyyy"),//Fatura Dönemi                                              
                                          BILLAMOUNT = com.BILLAMOUNT, //Fatura tutarı                                           
                                          PACKAGEFIXEDFEE = com.PACKAGEFIXEDFEE, //paket sabit Ücreti
                                          PACKAGETOTALPRICE = Convert.ToDecimal(com.BILLAMOUNT != "0" ? Convert.ToDecimal(com.BILLAMOUNT) : 0.0M) - Convert.ToDecimal(com.PACKAGEFIXEDFEE != "0" ? Convert.ToDecimal(com.PACKAGEFIXEDFEE) : 0.0M),
                                          STATUS = stInfo.NAME
                                      }).ToList().OrderByDescending(x => x.PhoneNumber);


                var jsonTotal = JsonConvert.SerializeObject(usercommondata);

                int totalRecord = usercommondata.Count();
                return Json(new { usercommondata });

              // I tired both return json 
               // return Json(new {  recordsFiltered = totalRecord, recordsTotal = totalRecord, data = jsonTotal });
            }
            else
            {
                return Json(new { Result = "ERROR" });
            }

I got this ERROR:

**DataTables warning: table id=dataTableCheckboxJs - Requested unknown parameter 'id' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4**

I dont know why i got this error if you help me you will saved my dates really,

The column and getting name from controller is the same could you help me to solve this problem pls.

And also there is no An Error back side of Chrome i looked it with F12 but there is no an error to solve from my side.

thank you so much for your help

colin · July 2020

Have you checked the diagnostic steps in the URL contained in the error message? That's the best place to start.

Colin

REFRESH Datatable when click new page button (Pagination)

REFRESH Datatable when click new page button (Pagination)

Answers

Howdy, Stranger!

Categories

DataTables

REFRESH Datatable when click new page button (Pagination)

REFRESH Datatable when click new page button (Pagination)

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables