Filtering in Paging mode

Grid allows you to implement filtering according to paging mode. In the example below filtering is enabled for page containing 10 records.

Filter Column Mask

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">
<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_filter.js"></script>    
<script  src="../../codebase/dhtmlxgridcell.js"></script>
 
 
 
<table width="600px">
    <tr>
        <td id="recinfoArea"></td>
    </tr>
    <tr>
        <td>
            <div id="gridbox" style="width:100%;height:200px;background-color:white;overflow:hidden"></div>
        </td>
    </tr>
    <tr>
        <td id="pagingArea"></td>
    </tr>
</table>
<br/>
<fieldset style="width:600px">
<legend>Filter</legend>
Column 
<select id='a10'>
    <option value='0'>0</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
</select>
Mask
<input type="text" name="a12" value="" id="a12">
<input type="button" name="a11" value="Filter" id="a11" onclick='mygrid.filterBy(document.getElementById("a10").value,document.getElementById("a12").value);'>
</fieldset>
<br />
<script>mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales,Book Title,Author");
mygrid.setInitWidths("50,250,240");
mygrid.enableAutoWidth(true);
mygrid.setColAlign("right,left,left");
mygrid.setColTypes("dyn,ed,ed");
mygrid.setColSorting("str,str,str");
mygrid.enablePaging(true, 10, 3, "pagingArea", true, "recinfoArea");
mygrid.init();
mygrid.setSkin("dhx_skyblue");
mygrid.loadXML("../common/500.xml");</script>