Jqgrid Demo

Jquery Jqgrid Demo

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<table id="pays_grid"></table>
<div id="pays_grid_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 = [{
    Country: "Germany",
    Capital: "Berlin",
    Date: "05-09-2014",
    Code: 49
  }, {
    Country: "France",
    Capital: "Paris",
    Date: "05-09-2014",
    Code: 33
  }, {
    Country: "US",
    Capital: "Washington D.C.",
    Date: "12-09-2014",
    Code: 1
  }],
  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: '250',
  gridview: true,
  width: 600,
  autoheight: true,
  auwidth: true,
  multiselect: true,
  rowNum: 10,
  rowList: [1, 5, 10],
  colNames: ['Country', 'Country Code', 'Developed', 'Capital', 'Date'], //define column names
  colModel: [{
    name: 'Country',
    key: true,
    align: 'center'
  }, {
    name: 'Code',
    align: 'center'
  }, {
    name: 'Developed',
    align: 'center',
    formatter: function() {
      return "<img src='http://www.iconsdb.com/icons/preview/red/circle-xxl.png' alt='red light' style='width:15px;height:15px'/>";
    }
  }, {
    name: 'Capital',
   ...