finding which page has newly created data in the serverside datatable

SweetAnonymous · July 2019

How to find out which page has newly created data in the serverside datatable.
How to display page dyamically? say for example need to display 3rd page by default dyanamically?

kthorngren · July 2019

How to find out which page has newly created data in the serverside datatable.

That depends on your server side environment. How is the new data created? What mechanism would you use to notify Datatables of the change in the Database?

How to display page dyamically? say for example need to display 3rd page by default dyanamically?

You would use the page() API to display a different page. The first page is 0 so the third would be 2. You would use page(2).draw().

Kevin

SweetAnonymous · July 2019

I created a new row and i know newly created column (Id) value, my requirement is to redirect to the home page (datatable exists page) highlight the newly created row and display that new created data page.

kthorngren · July 2019

Sounds like you are using server side processing (serverSide: true). In this case you would need to have your server script determine the page to display or page data to return. One option may be to use the api page.info() API to get the current page length, send that via ajax to the server and have it calculate and return the page number. Then use the page() API to request that page's data from the server. There may be other better ways to do this depending on your environment.

However if your data was client side you could use ajax.reload() to refresh the data then use the row().show() plugin to display the page. I believe this will work only with client side data. See this thread about using something similar with server side processing.
https://datatables.net/forums/discussion/comment/124265/#Comment_124265

Kevin

SweetAnonymous · July 2019

How to find the data in the server side datatable. Lets say, ID 456 need to find the 456 id row and display that page. What is the syntax to find the data in the server side datatable.

SweetAnonymous · July 2019

Or find the page number where my data exists?

kthorngren · July 2019

What is the syntax to find the data in the server side datatable.

Depends on what your data source is. I suspect the approach would be to send an ajax request to the server using the information Allan mentioned in the last post of the above thread. The server script would then process a sql query or other code (depending on the data source) to find where the desired data is located and return a page number. Then, as mentioned in that thread, use the page() API to go to that page.

Probably not a trivial task.

Kevin

SweetAnonymous · August 2019

@kthorngren :

$("#tblIndexNonEmployee").DataTable().destroy();
    oTable = $("#tblIndexNonEmployee").DataTable({
        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            if(userId.length > 0) {
                if (aData.UserId === userId) {
                    $('td', nRow).css('background-color', 'Yellow');
                    //var pageNo = this.api().page.info().page;
                    //$("#hdnIndexAddEditPageFound").val(pageNo);
                }
            }
            var api = this.api()
            var json = api.ajax.json();
            
            $("#hdnTotalNoOfRecords").val(json.recordsTotal);
        },
        "fnDrawCallback": function (oSettings) {
            if ($('#tblIndexNonEmployee tr').length <= 10) {
                $('.dataTables_paginate').hide();
            }
            else {
                $('.dataTables_paginate').show();
            }
        },
        initComplete: function () {
            oTable.page(1).draw('page');  
        },
        responsive: true,
        "aaData": eval(oTable),
        "bJQueryUI": true,
        "bDeferRender": true,
        "bSortClasses": false,
        "searching": false,
        autowidth: true,
        serverSide: true,
        statesave: true,
        paging: true,
        info: true,
        "displayStart": 11,
        "iDisplayLength": 10,
        "lengthMenu": [[10, 25, 50, 75, 100, -1], [10, 25, 50, 75, 100, "All"]],
        "lengthChange": true,
        statesave:true,
        dom: 'lBfrtip',
        buttons: [
            {
                extend: 'collection',
                text: 'Export Options',
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5'
                ],
                fade: true
            }
        ],
        "ajax": {
            "async": false,
            "type": "POST",
            "datatype": "json",
            "url": '/NewRequest/DrawIndexNonEmployeeDetails',
            "data": function (d) {
                d.nonEmpParameters = nonEmpParameters;
                d.draw = d.draw;
                d.start = d.start;
                d.length = d.length;
            }
        },
        "language":
        {
            "emptyTable": "There are currently no Non Employee details. Try searching with other filters."
        },
        "columns": [
            {
                name: "checkbox",className:"chkIndexNonEmp", autowidth: true,
                data: function (data, type, row, meta) {
                    if (data.UserId !== null) {
                        return '<input type="checkbox" class="inpSingleUserId"  id="' + data.UserId + '">';
                    }
                    else {
                        return "";
                    }
                }
            },
            { data: 'UserId', name: 'UserId',className:'tdIndexUserId', autowidth: true },
            { data: 'DisplayName', name: 'DisplayName', autowidth: true },
            { data: 'JobTitle', name: 'JobTitle', autowidth: true },
            { data: 'ProcessLevelName', name: 'ProcessLevel', autowidth: true },
            { data: 'LocationName', name: 'LocationName', autowidth: true },
            { data: 'DepartmentName', name: 'DepartmentName', autowidth: true },
            { data: 'SupervisorName', name: 'SupervisorName', autowidth: true },
            { data: 'ActiveStatus', name: 'ActiveStatus',className:'trIndexActiveStatus', autowidth: true },
            {
                name: "singleactive", autowidth: true, className: "tdIndexActions",
                data: function (data, type, row, meta) {
                    if (data.ActiveStatus === "No") {
                        return '<i class="fa fa-check fa-lg" id="tblSingleActive" style="color:green;" data-toggle="modal"></i> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp'
                            + '<i class="fal fa-file-export fa-lg Icon-blue" id="tblSingleTransfer" data-toggle="modal" data-target="#TransferSingle"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp' +
                            '<i class="fa fa-eye fa-lg" id="tblSingleView"></i>';
                    }
                    else {
                        return '<i class="fa fa-times fa-lg" id="tblSingleInActive" style="color:red;" data-toggle="modal"></i> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp'
                            + '<i class="fal fa-file-export fa-lg Icon-blue" id="tblSingleTransfer" data-toggle="modal" data-target="#TransferSingle"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp' +
                            '<i class="fa fa-eye fa-lg" id="tblSingleView"></i>';
                    }
                }
            },
        ]
    });
    if (lengthAll == "-1") {
        oTable.page.len(-1).draw();
    }

    
    
    

    $('.dataTables_filter').addClass('pull-left');
    $(".dataTables_length").css('clear', 'none');
    $(".dataTables_length").css('margin-right', '40px');
    $(".dataTables_info").css('clear', 'none');
    $(".dataTables_info").css('padding', '0');
    oTable.clear().draw();
}

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

SweetAnonymous · August 2019

Thanks for your quick reply.

What is wrong here, i tried to display page(1) in document.ready like below

$('#tblIndexEmployee').DataTable().page(2).draw('page');

It did not work either.

and also i tried

"displayStart": 11 attribute. It does not work.

kthorngren · August 2019

Here is an example of using page with server side processing:
http://live.datatables.net/lezupisi/1/edit

The problem with your initComplete code is the variable oTable hasn't been created yet.

        initComplete: function () {
            oTable.page(1).draw('page'); 
        },

You will probably see an error in the browser's console for this. I'm not sure you can go to another page in initCompelte. The displayStart works here:
http://live.datatables.net/nilemina/1/edit

Please update either test case to replicate your issue.

To troubleshoot your environment I would first look at the browser's console for errors. Next I would monitor the xhr request/response using the browser's developer tools. This should show whether the page request is going to the server or not. But without actually seeing the problem happen it would be hard to debug.

Kevin

SweetAnonymous · August 2019

I was able to do it. I get the row value from the datatable and look for the value and calculated the page no using lengthmenusettings and found the page No and called
oTable.page(1).draw('page'); after datatable is build. Thank you Kevin

SweetAnonymous · August 2019

I have a new problem now. I am not able to click on the page no and next button. Here is my code.

function DrawIndexNonEmployeeDetails(nonEmpParameters, userId, lengthAll) {

if (userId === undefined) {
    userId = "";
}
var lengthMenuSettings = "";
$("#tblIndexNonEmployee").DataTable().destroy();
oTable = $("#tblIndexNonEmployee").DataTable({

    "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        if (userId.length > 0) {
            if (aData.UserId === userId) {
                $('td', nRow).css('background-color', '#B0E0E6');

                //var pageNo = this.api().page.info().page;
                //$("#hdnIndexAddEditPageFound").val(pageNo);
            }
        }
        var api = this.api()
        var json = api.ajax.json();
        //lengthMenuSettings = api.page.info().length;
        //var params = api.ajax.params();
        //var pageNo = params.Draw + "params";
        //$("#hdnIndexAddEditPageFound").val(pageNo);
        //if (json.data.UserId === userId) {
        //  pageNo = json.page;
        //  $("#hdnIndexAddEditPageFound").val(pageNo);
        //}
        $("#hdnTotalNoOfRecords").val(json.recordsTotal);
    },
    //"fnDrawCallback": function (oSettings) {
    //  if ($('#tblIndexNonEmployee tr').length <= 10) {
    //      $('.dataTables_paginate').hide();
    //  }
    //  else {
    //      $('.dataTables_paginate').show();
    //  }
    //},
    responsive: true,
    "aaData": eval(oTable),
    "searching": false,
    autowidth: true,
    serverSide: true,
    statesave: true,
    paging: true,
    info: true,
    "iDisplayLength": 10,
    "lengthMenu": [[10, 25, 50, 75, 100, -1], [10, 25, 50, 75, 100, "All"]],
    "lengthChange": true,
    dom: "Blfrtip",
    buttons: [
        {
            text: '<a class="btn btn-default btn-space icon-green" role="button"><span class="fa fa-user"><i class="glyphicon glyphicon-transfer fa-lg" aria-hidden="true"></i></span>&nbsp;<span class="spanIndexTransfer">Transfer all</span></a>',
            action: function (e, dt, node, config) {
                showLoadingModal();
                setTimeout(function () {
                    ExecuteTransferAll();
                }, 10);
                clearTimeout(10);
            }
        },
        {
            text: '<a class="btn btn-default btn-space icon-green" role="button"><i class="fa fa-check fa-lg" aria-hidden="true"></i>&nbsp;<span class="spanIndexActive">Mark all Active</span></a>',
            action: function (e, dt, node, config) {
                showLoadingModal();
                setTimeout(function () {
                    ExecuteActiveAll();
                }, 10);
                clearTimeout(10);
            }
        },
        {
            text: '<a class="btn btn-default btn-space icon-red" role="button"><i class="fa fa-times fa-lg" aria-hidden="true"></i>&nbsp;<span class="spanIndexInActive">Mark all InActive</span></a>',
            action: function (e, dt, node, config) {
                showLoadingModal();
                setTimeout(function () {
                    ExecuteInActiveAll();
                }, 10);
                clearTimeout(10);
            }
        },
        {
            extend: 'collection',
            text: '<a class="btn btn-default btn-space icon-blue" role="button"><i class="fal fa-file-excel fa-lg" aria-hidden="true"></i>&nbsp;&nbsp;<span class="spanIndexExport">Export to Excel</span></a>',
            fade: true
        },
    ],
    "ajax": {
        "async": false,
        "type": "POST",
        "datatype": "json",
        "url": '/NewRequest/DrawIndexNonEmployeeDetails',
        "data": function (d) {
            d.nonEmpParameters = nonEmpParameters;
            d.draw =parseInt( d.draw);
            d.start = parseInt(d.start);
            d.length = parseInt(d.length);
            d.UserId = userId;
            d.lengthMenuSettings = lengthMenuSettings;
        }
    },
    "language":
    {
        "emptyTable": "There are currently no Non Employee details. Try searching with other filters."
    },
    "columns": [
        {
            name: "checkbox", className: "chkIndexNonEmp", autowidth: true,
            data: function (data, type, row, meta) {
                if (data.UserId !== null) {
                    return '<input type="checkbox" class="inpSingleUserId"  id="' + data.UserId + '">';
                }
                else {
                    return "";
                }
            }
        },
        { data: 'UserId', name: 'UserId', className: 'tdIndexUserId', autowidth: true },
        { data: 'DisplayName', name: 'DisplayName', autowidth: true },
        { data: 'JobTitle', name: 'JobTitle', autowidth: true },
        { data: 'ProcessLevelName', name: 'ProcessLevel', autowidth: true },
        { data: 'LocationName', name: 'LocationName', autowidth: true },
        { data: 'DepartmentName', name: 'DepartmentName', autowidth: true },
        { data: 'SupervisorName', name: 'SupervisorName', autowidth: true },
        { data: 'ActiveStatus', name: 'ActiveStatus', className: 'trIndexActiveStatus', autowidth: true },
        {
            name: "singleactive", autowidth: true, className: "tdIndexActions",
            data: function (data, type, row, meta) {
                if (data.ActiveStatus === "No") {
                    return '<i class="fa fa-check fa-lg" id="tblSingleActive" style="color:green;"></i> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp'
                        + '<i class="fal fa-file-export fa-lg Icon-blue" id="tblSingleTransfer"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp' +
                        '<i class="fa fa-eye fa-lg" id="tblSingleView"></i>';
                }
                else {
                    return '<i class="fa fa-times fa-lg" id="tblSingleInActive" style="color:red;"></i> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp'
                        + '<span class="fa fa-user icon-green"></span><i class="glyphicon glyphicon-transfer fa-lg icon-green" id="tblSingleTransfer"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp' +
                        '<i class="fa fa-eye fa-lg" id="tblSingleView"></i>';
                }
            }
        },
    ],
});
if (lengthAll === "-1") {
    oTable.page.len(-1).draw();
}

$('.dataTables_filter').addClass('pull-left');
$(".dataTables_length").css('clear', 'none');
$(".dataTables_length").css('margin-right', '40px');
$(".dataTables_info").css('clear', 'none');
$(".dataTables_info").css('padding', '0');
oTable.clear().draw();

}

kthorngren · August 2019

I am not able to click on the page no and next button.

Hard to say what the problem might be. What happens when you click on the page number or next button?

Do you see errors in the browser's console?

Do you see an ajax request sent and response in the browser's developer tools?

Kevin

SweetAnonymous · August 2019

Nothing happens. no errors. I think its in disabled mode

kthorngren · August 2019

Can you post a link to your page so we can take a look?

Kevin

SweetAnonymous · August 2019

I change the references, Its working fine. Thanks Kevin

finding which page has newly created data in the serverside datatable

finding which page has newly created data in the serverside datatable

Replies

Howdy, Stranger!

Categories

DataTables

finding which page has newly created data in the serverside datatable

finding which page has newly created data in the serverside datatable

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables