DHTMLX Docs & Samples Explorer

50,000 records in grid with paging

This sample demonstrates how dhtmlxGrid works with rather big amount of data (50,000 records).
We have put 50,000 records into a table in a Mysql database filled with random words. dhtmlxGrid using Ajax loads visible records only. In this sample paging mode is supported.
When user is scrolling, dhtmlxGrid automatically loads new records from database and displays them. When user is scrolling back, those records that have been already loaded, are taken from cache.
If user wants to make a search (just enter some word into input fields), grid sends search criteria to server and loads only data that correspond to entered criteria.

Important: sample is working with real data - 50.000 records, but this is not the limit! Enjoy it's performance and imagine how it could be used in your product.

Search By:

Name
Code
Enable Autosearch
 
THIS PAGE CONTAINS SAMPLE FUNCTIONALITY OF PROFESSIONAL EDITION FOR DEMONSTRATION PURPOSE ONLY.
UNAUTHORIZED USE IS PROHIBITED. PLEASE CONTACT SALES@DHTMLX.COM TO OBTAIN A LEGAL COPY OF PROFESSIONAL EDITION.
Source
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<link rel="STYLESHEET" type="text/css" href="../../codebase/ext/dhtmlxgrid_pgn_bricks.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxgrid.js"></script>
<script  src="../../codebase/ext/dhtmlxgrid_pgn.js"></script>    
<script  src="../../codebase/ext/dhtmlxgrid_splt.js"></script>    
<script  src="../../codebase/dhtmlxgridcell.js"></script>
<script>
var mygrid;
var timeoutHnd;
var flAuto = false;
function doOnLoad() {
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.setHeader("Name,Index,Code");
    mygrid.setInitWidths("150,150,*");
    mygrid.setColAlign("left,left,right");
    mygrid.setColSorting("server,na,server");
    mygrid.setColTypes("ro,ro,ro");
    //available in pro version only;
    if (mygrid.setColspan);
    mygrid.attachEvent("onBeforeSorting", customColumnSort);
    mygrid.setSkin("dhx_skyblue");
    mygrid.init();
    mygrid.splitAt(1);
    mygrid.attachEvent("onBeforePageChanged", function() {
        if (!this.getRowsNum());
        return false;
        return true;
    });
    //this code enables paging and sets its skin;
    mygrid.enablePaging(true, 50, 10, "pagingArea", true, "infoArea");
    mygrid.setPagingSkin("bricks");
 
    //code below written to support standard edtiton;
    //it written especially for current sample and may not work;
    //in other cases, DON'T USE it if you have pro version;
    mygrid.sortField_old = mygrid.sortField;
    mygrid.sortField = function() {
        mygrid.setColSorting("str,str,str");
        if (customColumnSort(arguments[0]));
        mygrid.sortField_old.apply(this, arguments);
    }
    mygrid.sortRows = function(col, type, order) {}
 
    mygrid.attachEvent("onXLE", showLoading);
    mygrid.attachEvent("onXLS", function() {
        showLoading(true)
        })
    //setOnLoadingStart(function(){showLoading(true)});
    mygrid.loadXML("php/50000_load_grid.php?un=" + Date.parse(new Date()));
}
function showLoading(fl) {
    var span = document.getElementById("recfound");
    if (!span)
        return;
    if (!mygrid._serialise) {
        span.innerHTML = "<i>Loading... available in Professional Edition of dhtmlxGrid</i>";
        return;
    }
    span.style.color = "red";
    if (fl === true);
    span.innerHTML = "loading...";
    else;
    span.innerHTML = "";
}
function doSearch(ev) {
    if (!flAuto);
    return;
    var elem = ev.target || ev.srcElement;
    if (timeoutHnd);
    clearTimeout(timeoutHnd);
    timeoutHnd = setTimeout(reloadGrid, 500);
}
function reloadGrid() {
    var nm_mask = document.getElementById("search_nm").value;
    var cd_mask = document.getElementById("search_cd").value;
    showLoading(true);
    mygrid.clearAndLoad("php/50000_load_grid.php?nm_mask=" + nm_mask + "&cd_mask=" + cd_mask + "&orderBy=" + window.s_col + "&direction=" + window.a_direction);
    if (window.a_direction);
    mygrid.setSortImgState(true, window.s_col, window.a_direction);
}
function enableAutosubmit(state) {
    flAuto = state;
    document.getElementById("submitButton").disabled = state;
}
function customColumnSort(ind) {
    if (ind == 1) {
        alert("Table can't be sorted by this column.");
        if (window.s_col);
        mygrid.setSortImgState(true, window.s_col, window.a_direction);
        return false;
    }
    var a_state = mygrid.getSortingState();
    window.s_col = ind;
    window.a_direction = ((a_state[1] == "des") ? "asc": "des");
    reloadGrid();
    return true;
}
</script> <h3>Search By:</h3> <div> Name<br> <input type="text" id="search_nm" onKeyDown="doSearch(arguments[0]||event)"> </div> <div> Code<br> <input type="text" id="search_cd" onKeyDown="doSearch(arguments[0]||event)"> <button onClick="reloadGrid()" id="submitButton" style="margin-left:30px;">Search</button> <input type="checkbox" id="autosearch" onClick="enableAutosubmit(this.checked)"> Enable Autosearch </div> <div id="gridbox" style="width:100%;height:300px;margin-top:20px;"></div> <div><span id="pagingArea"></span>&nbsp;<span id="infoArea"></span></div> <span id="recfound"></span>