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

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>