50,000 records in grid

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.
When user is scrolling, dhtmlxGrid automatically loads new records from database and displays them. When user is scrolling back, 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 just corresponding to entered criteria data.

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

Search By:

Name

Code
Enable Autosearch

Records found:

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;
    mygrid.attachEvent("onBeforeSorting", customColumnSort);
    mygrid.setSkin("dhx_skyblue");
    mygrid.init();
    mygrid.enableSmartRendering(true);
    //available in Pro Edition only;
    if (mygrid.setColspan);
    mygrid.attachEvent("onXLE", setCounter);
    else {
        //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.loadXML("php/50000_load_grid.php?un=" + Date.parse(new Date()));
    showLoading();
}
function setCounter() {
    var span = document.getElementById("recfound");
    span.style.color = "";
    span.innerHTML = mygrid.getRowsNum();
}
function showLoading() {
    var span = document.getElementById("recfound");
    if ( !! mygrid.setColspan) {
        span.innerHTML = "<i>available in Professional Edition of dhtmlxGrid</i>";
        return;
    }
    span.style.color = "red";
    span.innerHTML = "loading...";
}
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;
    mygrid.clearAll();
    mygrid.loadXML("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);
    showLoading();
}
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 false;
}

</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;margin-bottom:10px;"></div> <div>Records found: <span id="recfound"></span></div>