jQGrid分页在jquery UI选项卡中不起作用

时间:2013-09-05 09:50:38

标签: jquery jquery-ui jqgrid

我正在使用jQuery网格和查询Ui我有一个标签内的网格。我的问题是第一次分页不工作 当我点击排序任何字段然后只有分页工作

var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"],[48803, "DSK1", "", "02200220", "OPEN"],[48803, "DSK1", "", "02200220", "OPEN"],[48803, "DSK1", "", "02200220", "OPEN"],[48803, "DSK1", "", "02200220", "OPEN"],[48803, "DSK1", "", "02200220", "OPEN"],[48803, "DSK1", "", "02200220", "OPEN"],[48803, "DSK1", "", "02200220", "OPEN"],[48803, "DSK1", "", "02200220", "OPEN"],[48803, "DSK1", "", "02200220", "OPEN"],[48803, "DSK1", "", "02200220", "OPEN"],[48803, "DSK1", "", "02200220", "OPEN"],[48803, "DSK1", "", "02200220", "OPEN"]];

    var names = ["id", "thingy", "blank", "number", "status"];
    var mydata = [];



    $(function() {

        var $tabs = $( "#tabs" ).tabs({
             show : function(event, ui) {
                 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",total:"320.00"},
            {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"437.00"},
            {id:"10",invdate:"2013-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"3460.00"},
            {id:"11",invdate:"2004-01-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"450.00"},
            {id:"12",invdate:"20011-12-21",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"450.00"},
            {id:"13",invdate:"2007-06-31",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"640.00"},
        ],
           $grid = $("#list"),$pager = $("#pager");
             callMe($grid,mydata,$pager);
             for (var i = 0; i <= mydata.length; i++) {
                         $("#list").jqGrid('addRowData', i + 1, mydata[i]);
                    }

             }  
        });

          function callMe(grid,mydata,pager){
                jQuery("#list").jqGrid({
                        datatype: "local",
                        height: 250,
                        width:640,
                        colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total', 'Notes'],
                        colModel:[
                            {name:'id',index:'id', width:60, 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}
                        ],
                        pager: '#pager',
                        rowNum:10,
                        rowList:[10,20,30],
                        sortname: 'id',
                        sortorder: 'desc',
                        viewrecords: true,
                        multiselect: true,
                        imgpath: "lib/basic/images",
                        caption: "Manipulating Array Data"
                    });
         }

        });

http://jsfiddle.net/rDY3B/1/

1 个答案:

答案 0 :(得分:1)

无法找到问题,但通过在jqGrid的reloadGrid中触发loadComplete一次,找到了相同的解决方法。

您可以查看我的解决方案JSFiddle