Html Grid

Invoke the addfilter method of the jqxGrid. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id='jqxWidget'>
    <div id="jqxgrid"></div>
</div>
<input type="button" style="margin: 10px;" id="jqxbutton" value="Add new filter" />
<input type="button" style="margin: 10px;" id="jqxbutton2" value="Clear filters" />

JavaScript

var data = generatedata(500);
var source = {
    localdata: data,
    datafields: [{
        name: 'firstname',
        type: 'string'
    }, {
        name: 'lastname',
        type: 'string'
    }, {
        name: 'productname',
        type: 'string'
    }, {
        name: 'date',
        type: 'date'
    }, {
        name: 'quantity',
        type: 'number'
    }, {
        name: 'available',
        type: 'boolean'
    }, {
        name: 'price',
        type: 'number'
    }],
    datatype: "array"
};

var adapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").jqxGrid({
    width: 500,
    theme: 'energyblue',
    source: adapter,
    ready: function () {
        setTimeout(function () {
            addfilter(false);
        }, 1500);
    },
    filterable: true,
    columns: [{ 
    		text: 'Available', 
        datafield: 'available', 
        columntype: 'checkbox', 
        filtertype: 'bool', 
        width: 67
    }, { 
    		text: 'Av2', 
        datafield: 'available2',
        align: 'center',
        filtertype: 'string',
        width: 67,
        cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
        		var availableValue = $('#jqxgrid').jqxGrid('getcellvalue', row, "available");
            var content = availableValue ? 'Yes' : 'No';
        		return '<div style="margin: 6px 0 0 10px;">' + content + '</div>';          
        }
    }, {
        text: 'First Name',
        datafield: 'firstname',
        columngroup: 'Name',
        width: 90
    }, {
        text: 'Last Name',
        columngroup: 'Name',
        datafield: 'lastname',
        width: 90
    }, {
        text: 'Product',
        datafield: 'productname',
        width: 170
    }, {
        text: 'Order Date',
        datafield: 'date',
        width: 160,
        cellsformat: 'dd-MMMM-yyyy'
    }, {
        text: 'Quantity',
        datafield: 'quantity',
        width: 80,
        cellsalign: 'right'
    }, {
        text: 'Unit Price',
    ...