working jqGrid Example

by gunjan_prmr

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="pays_grid"></table>
<div id="pager"></div>

CSS

.ui-jqgrid .ui-search-table .ui-search-input > input,
.ui-jqgrid .ui-search-table .ui-search-input > select,
.ui-jqgrid .ui-search-table .ui-search-input > img {
    vertical-align: middle;
    display: inline-block;
}

JavaScript

var mydata = [
		{ Date: "05-09-2014"}
	],
    grid = jQuery("#pays_grid"),
    initDateWithButton = function (elem) {
        if (/^\d+%$/.test(elem.style.width)) {
            // remove % from the searching toolbar
            //elem.style.width = '';
            $(elem).css({
                width: "230px"
            });
        }
        // to be able to use 'showOn' option of datepicker in advance searching dialog
        // or in the editing we have to use setTimeout
        setTimeout(function () {
            $(elem).datepicker({
                dateFormat: 'dd-mm-yy',
                showOn: 'button',
                changeYear: true,
                changeMonth: true,     
                buttonImageOnly: true,
                buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
                buttonText: "Select date",            
                onSelect: function (dateText, inst) {
                    if (inst.id.substr(0, 3) === "gs_") {
                         grid[0].triggerToolbar();
                    }
                    else {
                        // to refresh the filter
                        $(inst).trigger("change");
                    }
                }
            });
        }, 100);
    };

grid.jqGrid({ //set your grid id
	data: mydata, //insert data from the data object we created above
	datatype: 'local',
	height: "auto",
    gridview: true,
    width: 800,
    rowNum: 10,
    rowList: [1, 5, 10],
	colNames:['Date'], //define column names
	colModel:[
      
	   {name: 'Date', index: 'Date', align: 'center', width: 100, 
            sorttype: 'date', editable: true,
                editoptions: { dataInit: initDateWithButton, size: 11 },
                searchoptions: {
                    sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
                    dataInit: initDateWithButton
                }
       }
	], //define column models
	pager: '#pager', //set your pager div id
	sortname:...