Datatable Custom pagination

Datatable Custom pagination

jayasankarprkjayasankarprk Posts: 5Questions: 2Answers: 0

Myself Jayasankar and I am a new one to datatable. I have 13000+ records in my database. At the time of first page load, I need to get only the 1st 10 (1-10) records from database. If I move to 2nd page, the next set of 10 (11-20) records should taken. So that I can reduce the data loading time. Is it possible through datatable server side processing? If so please give me the sample code which suitable for my requirement. Please help me...

Answers

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    The basic server-side example is here:

    http://datatables.net/examples/data_sources/server_side.html

  • jayasankarprkjayasankarprk Posts: 5Questions: 2Answers: 0
    edited June 2015

    Is it will work for my requirements?

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    The example works in the way you describe.

  • jayasankarprkjayasankarprk Posts: 5Questions: 2Answers: 0

    I tried as per the link you specified. I am getting the error given below,
    'DataTables warning: table id=tblItemHeading - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1'.
    The code is given below,

    $(document).ready(function () {
    var SearchText = $('#txtSearch').val();
    var dtItems = $('#tblItemHeading').dataTable({
    "autoWidth": false,
    "columnDefs": [
    {
    "targets": [6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
    "sClass": "hide_column"
    }
    ],
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "ItemMaster.aspx/GetItemList",
    "fnServerData": function (sSource, aoData, fnCallback) {
    aoData.push({ "name": "ItemCode", "value": $('#txtSearch').val() });
    aoData.push({ "name": "ItemName", "value": $('#txtSearch').val() });
    $.ajax({
    "dataType": 'json',
    "contentType": "application/json; charset=utf-8",
    "type": "GET",
    "url": sSource,
    "data": aoData,
    "success": function (msg) {
    var json = jQuery.parseJSON(msg.d);
    fnCallback(json);
    $("#tblItemHeading").show();
    },
    error: function (xhr, textStatus, error) {
    if (typeof console == "object") {
    console.log(xhr.status + "," + xhr.responseText + "," + textStatus + "," + error);
    }
    }
    });
    }

            });        });
    

    <

    table class="table table-striped table-bordered table-hover" id="tblItemHeading">
    <colgroup>
    <col style="width: 100px;" />
    <col style="width: 100px;" />
    <col />
    <col style="width: 100px;" />
    </colgroup>
    <thead>
    <tr>
    <th style="color: #000; font-weight: bold;">Sl. No</th>
    <th style="color: #000; font-weight: bold;">Code</th>
    <th style="color: #000; font-weight: bold;">Item Name</th>
    <th style="color: #000; font-weight: bold;">Unit Of Measure</th>
    <th style="color: #000; font-weight: bold; width: 50px;"></th>
    <th style="color: #000; font-weight: bold; width: 50px;"></th>
    </tr>
    </thead>
    <tbody id="tblItemDetails">
    </tbody>

        [WebMethod()]
        [ScriptMethod()]
        public static string GetItemList(string ItemCode, string ItemName)
        {
            try
            { 
                ItemMasterService itemMasterService = new ItemMasterService();
                List<ItemMasterModel> lstItemMasterModel = itemMasterService.GetItemDetailsByCodeByDesc(ItemCode.Trim(), ItemName.Trim());
                return JsonConvert.SerializeObject(lstItemMasterModel);
            }
            catch (Exception ex)
            {
                return ex.Message;
            }
        }
    

    Please help me...

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    What information do you find after following the diagnostic instructions at http://datatables.net/tn/1 ?

  • jayasankarprkjayasankarprk Posts: 5Questions: 2Answers: 0

    I cannot identify what is the issue... Please help me.. what I need to do for fixing this issue...?

This discussion has been closed.