JQGrid filter toolbar example

by redoak2000

HTML

<script src="https://oss.maxcdn.com/jqgrid/4.6.0/jquery.jqGrid.min.js"></script>
<script src="https://oss.maxcdn.com/jqgrid/4.6.0/i18n/grid.locale-en.js"></script>
<link rel="stylesheet" href="https://oss.maxcdn.com/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<table id="list">
  <tbody>
    <tr>
      <td />
    </tr>
  </tbody>
</table>
<div id="pager" />

CSS

/*
view-source:http://www.ok-soft-gmbh.com/jqGrid/CustomTopToolbar.htm
#gbox_test1 .ui-jqgrid-view .ui-search-toolbar .ui-th-column  {
    background-color: grey;
    background-image: none
}
*/

JavaScript

var mydata = [{
                id: "1",
                invdate: "2007-10-01",
                name: "test",
                note: "note",
                amount: "200.00",
                tax: "10.00",
                total: "210.00"
              },
              {
                id: "2",
                invdate: "2007-10-02",
                name: "test2",
                note: "note2",
                amount: "300.00",
                tax: "20.00",
                total: "320.00"
              },
              {
                id: "3",
                invdate: "2007-09-01",
                name: "test3",
                note: "note3",
                amount: "400.00",
                tax: "30.00",
                total: "430.00"
              },
              {
                id: "4",
                invdate: "2007-10-04",
                name: "test",
                note: "note",
                amount: "200.00",
                tax: "10.00",
                total: "210.00"
              },
              {
                id: "5",
                invdate: "2007-10-05",
                name: "test2",
                note: "note2",
                amount: "300.00",
                tax: "20.00",
                total: "320.00"
              },
              {
                id: "6",
                invdate: "2007-09-06",
                name: "test3",
                note: "note3",
                amount: "400.00",
                tax: "30.00",
                total: "430.00"
              },
              {
                id: "7",
                invdate: "2007-10-04",
                name: "test",
                note: "note",
                amount: "200.00",
                tax: "10.00",
                total: "210.00"
              },
              {
                id: "8",
                invdate: "2007-10-03",
                name: "test2",
                note: "note2",
                amount: "300.00",
                tax: "20.00",
            ...