jqGrid Data - Search (toolbar)

jqGrid v4.6

by 1004lucifer

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-kr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<div style="height:350px;">
  <table id="list"><tr><td></td></tr></table> 
  <div id="pager"></div><br />
  <h4>
  크롬 개발자도구 켠 후 헤더아래의 툴바검색 부분에 값을 입력 후 엔터를 입력 시 서버로 필터에 입력한 값이 서버로 전송되는것을 확인 할 수 있다.
  </h4>
</div>

JavaScript

var serverJsonData = 
{
   'page':'1',
   'total': 2,
   'records':'13', 
   'rows':[ 
     {'id': '1', 'invdate': '19-02-01', 'name': '1004lucifer', 'amount': '100', 'tax': '12', 'total': '300', 'note': 'description'},
     {'id': '2', 'invdate': '19-03-01', 'name': '1004lucifer', 'amount': '100', 'tax': '12', 'total': '300', 'note': 'description'},
     {'id': '3', 'invdate': '19-04-01', 'name': '1004lucifer', 'amount': '100', 'tax': '12', 'total': '300', 'note': 'description'},
     {'id': '4', 'invdate': '19-05-01', 'name': '1004lucifer', 'amount': '100', 'tax': '12', 'total': '300', 'note': 'description'},
     {'id': '5', 'invdate': '19-06-01', 'name': '1004lucifer', 'amount': '100', 'tax': '12', 'total': '300', 'note': 'description'},
     {'id': '6', 'invdate': '19-07-01', 'name': '1004lucifer', 'amount': '100', 'tax': '12', 'total': '300', 'note': 'description'}
    ] 
};

var mygrid = $("#list")
.jqGrid({
  url: '/echo/json/', // use JSFiddle echo service
  datatype: 'json',
  mtype: 'POST',
  postData: { json: JSON.stringify(serverJsonData) },
  colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
  colModel:[
    {name:'id',index:'id', width:65},
    {name:'invdate',index:'invdate', width:90,searchoptions:{dataInit:function(el){$(el).datepicker({dateFormat:'yy-mm-dd'});} }},
    {name:'name',index:'name', width:100},
    {name:'amount',index:'amount', width:80, align:"right"},
    {name:'tax',index:'tax', width:80, align:"right", stype:'select', editoptions:{value:":All;0.00:0.00;12:12.00;20:20.00;40:40.00;60:60.00;120:120.00"}},		
    {name:'total',index:'total', width:80,align:"right"},		
    {name:'note',index:'note', width:150, sortable:false}		
  ],
  cellEdit: true,
  caption : 'Search (Toolbar)',
  height: 'auto',
  sortname: 'id',
  autowidth: true,
	rownumbers: true,
  rowNum: 5,
  pager: '#pager'
})
.jqGrid('navGrid','#pager',
	{
  	edit:false,
    add:false,
    del:false,
    search:false,
   ...