Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="//code.jquery.com/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css"></script>
  <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
  <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
  
  
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
<button type="button" id="submitButtonID" class="btn btn-primary btn-lg" onclick="applyFilters()">Apply Filter</button>
<select class="selectpicker"  id="sales" >
    <option>all</option>
    <option>test</option>
    <option>test2</option>
    <option>test3</option>
  </select>
  <input type="button" onclick="getData()" value="Click">
</body>
</html>
 
$(document).ready(function() {
            var grid = $("#list"),
                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:"test",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:"test",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",total:"320.00"},
                   {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                   {id:"10",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                   {id:"11",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                   {id:"12",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                   {id:"13",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                   {id:"14",invdate:"2007-10-05",name:"test",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                   {id:"15",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                   {id:"16",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                   {id:"17",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                   {id:"18",invdate:"2007-09-01",name:"test",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
                ];
​
            grid.jqGrid({
                datatype: "local",
                data: mydata,
                colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
                colModel:[
                    {name:'id',index:'id', key: true, width:70, sorttype:"int"},
                    {name:'invdate',index:'invdate', width:90, sorttype:"date"},
                    {name:'name',index:'name', width:100},
                    {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
                    {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
                    {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
                    {name:'note',index:'note', width:150, sortable:false}
                ],
                search:true,
                pager:'#pager',
                jsonReader: {cell:""},
                rowNum: 8,
                rowList: [5, 10, 20, 50],
                sortname: 'id',
                sortorder: 'asc',
                viewrecords: true,
                height: "100%",
                caption: "Multiple search with local data"
            });
            grid.jqGrid('navGrid','#pager',{add:false,edit:false,del:false,search:true,refresh:true},
                        {},{},{},{multipleSearch:true, multipleGroup:true, showQuery: true});
    var x=$("#list").getGridParam("reccount");
        
});
$(document).ready(function() {
            var grid = $("#list"),
                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",total:"320.00"},
                   {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                   {id:"10",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                   {id:"11",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                   {id:"12",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                   {id:"13",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                   {id:"14",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                   {id:"15",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                   {id:"16",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                   {id:"17",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                   {id:"18",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
                ];
​
            grid.jqGrid({
                datatype: "local",
                data: mydata,
                colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
                colModel:[
                    {name:'id',index:'id', key: true, width:70, sorttype:"int"},
                    {name:'invdate',index:'invdate', width:90, sorttype:"date"},
                    {name:'name',index:'name', width:100},
                    {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
                    {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
                    {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
                    {name:'note',index:'note', width:150, sortable:false}
                ],
                search:true,
                pager:'#pager',
                jsonReader: {cell:""},
                rowNum: 8,
                rowList: [5, 10, 20, 50],
                sortname: 'id',
                sortorder: 'asc',
                viewrecords: true,
                height: "100%",
                caption: "Multiple search with local data"
            });
            grid.jqGrid('navGrid','#pager',{add:false,edit:false,del:false,search:true,refresh:true},{},{},{},{multipleSearch:true, multipleGroup:true, showQuery: true});
            var x=$("#list").getGridParam("reccount");
                //alert(x);
            // var gridData = $("#list").jqGrid('getRowData');
            // alert(griData);
    
});
​
function applyFilters(){
 var myfilter = {
            groupOp: "AND",
            rules: []
        };
    var sales = $("#sales").val();
    alert(sales);       
            if (sales != "all") {
                myfilter.rules.push({
                    field: "name",
                    op: "eq",
                    data: sales
                });
            }
            else {
                myfilter.rules.push({
                    field: "name",
                    op: "ne",
                    data: ""
                });
            }
            setTimeout(jQuery("#list").setGridParam({
            search: true, // if you want to force the searching
            postData: {
                            filters: myfilter
                    }
                    }).trigger('reloadGrid'), 1);
}
​
var oldFrom = $.jgrid.from,lastSelected;
​
$.jgrid.from = function (source, initalQuery) 
{
    var result = oldFrom.call(this, source, initalQuery),
    old_select = result.select;
    result.select = function (f) {
        lastSelected = old_select.call(this, f);
        return lastSelected;
};
return result;
};
​
function getData()
{
    alert(lastSelected.length); 
}
​
​
​
​
​
​
​
​
​
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers