jqgrid本地加载分页_本地数据jqGrid分页

var mydata='';

$(function() {

var str = '';

str += "共条记录       "

str += "每页" + ""

str += "5" + "10" + "15"

str += "20" + "25" + "30"

str += "" + "条  ";

str += "";

str += "  ";

str += "  ";

str += "当前1 / 页"

str += "  ";

str += "  ";

str += "";

str += "跳转到:"

str += " 页"

$("#pager").append(str);

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-10-02",

name: "test2",

note: "note2",

amount: "300.00",

tax: "20.00",

total: "320.00"

}, {

id: "13",

invdate: "2007-09-01",

name: "test3",

note: "note3",

amount: "400.00",

tax: "30.00",

total: "430.00"

}, {

id: "14",

invdate: "2007-10-04",

name: "test",

note: "note",

amount: "200.00",

tax: "10.00",

total: "210.00"

}, {

id: "15",

invdate: "2007-10-05",

name: "test2",

note: "note2",

amount: "300.00",

tax: "20.00",

total: "320.00"

}, {

id: "16",

invdate: "2007-09-06",

name: "test3",

note: "note3",

amount: "400.00",

tax: "30.00",

total: "430.00"

}, {

id: "17",

invdate: "2007-10-04",

name: "test",

note: "note",

amount: "200.00",

tax: "10.00",

total: "210.00"

}, {

id: "18",

invdate: "2007-10-03",

name: "test2",

note: "note2",

amount: "300.00",

tax: "20.00",

total: "320.00"

}, {

id: "19",

invdate: "2007-09-01",

name: "test3",

note: "note3",

amount: "400.00",

tax: "30.00",

total: "430.00"

}, {

id: "20",

invdate: "2007-09-01",

name: "test3",

note: "note3",

amount: "400.00",

tax: "30.00",

total: "430.00"

}, {

id: "21",

invdate: "2007-09-01",

name: "test3",

note: "note3",

amount: "400.00",

tax: "30.00",

total: "430.00"

}

];

jQuery("#grid1").jqGrid({

datatype: "local",

width: pageWidth() - 18,

height: 450,

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

}

],

rownumbers: true,

multiselect: false,

caption: "Manipulating Array Data"

});

// 数据初始化

var total = mydata.length;//记录总数

$("#p_total").html(total);

var p_total_page='';//页数总数

var p_num = $("#set_page_size option:selected").val();//当前页显示数据

if(total % p_num == 0){

p_total_page = parseInt(total / p_num);

}else{

p_total_page = parseInt(total / p_num)+1;

}

$("#p_total_page").html(p_total_page);

for (var i = 0; i < p_num; i++) {

jQuery("#grid1").jqGrid('addRowData', i + 1, mydata[i]);

}

// 总页数/每页显示多少条记录

$("#set_page_size").change(function() {

$("#grid1").clearGridData();

p_num = $("#set_page_size option:selected").val();

if(total % p_num == 0){

p_total_page = parseInt(total / p_num);

}else{

p_total_page = parseInt(total / p_num)+1;

}

$("#p_total_page").html(p_total_page);

$("#p_current").html(1);//当前页码

for (var i = 0; i < p_num; i++) {

jQuery("#grid1").jqGrid('addRowData', i + 1, mydata[i]);

}

});

// 第一页

$("#p_first").click(function() {

$("#p_current").html("1");

var p_num = $("#set_page_size option:selected").html();

$("#grid1").clearGridData();

for(var i=0;i

jQuery("#grid1").jqGrid('addRowData', i + 1, mydata[i]);

}

});

// 前一页

$("#p_before").click(function() {

var num = $("#p_current").html();

var a = new Array();

if (num > 1) {

$("#p_current").html(num - 1);

var p = $("#p_current").html()-1;

var p_num = $("#set_page_size option:selected").html();

var sum = p*p_num;

$("#grid1").clearGridData();

for (var i = sum; i < mydata.length; i++) {

a.push(mydata[i]);

}

for(var i=0;i

jQuery("#grid1").jqGrid('addRowData', i + 1, a[i]);

}

};

});

// 下一页

$("#p_next").click(function() {

var num = $("#p_current").html();

var total = $("#p_total_page").html();

var a = new Array();

if (num < total) {

$("#p_current").html(parseInt(num) + 1);

var p = $("#p_current").html()-1;

var p_num = $("#set_page_size option:selected").html();

var sum = p*p_num;

$("#grid1").clearGridData();

for (var i = sum; i < mydata.length; i++) {

a.push(mydata[i]);

}

for(var i=0;i

jQuery("#grid1").jqGrid('addRowData', i + 1, a[i]);

}

};

});

//最后一页

$("#p_last").click(function() {

$("#p_current").html(p_total_page);

var p = $("#p_current").html()-1;

var p_num = $("#set_page_size option:selected").html();

var sum = p*p_num;

var a = new Array();

$("#grid1").clearGridData();

for (var i = sum; i < mydata.length; i++) {

a.push(mydata[i]);

}

for(var i=0;i

jQuery("#grid1").jqGrid('addRowData', i + 1, a[i]);

}

});

// 跳转到几页

$("#p_pager").keydown(function(e) {

if (e.keyCode == 13) {

var pager = $("#p_pager").val();

if (pager <= p_total_page) {

$("#p_current").html(pager);

var p = pager-1;

var p_num = $("#set_page_size option:selected").html();

var sum = p*p_num;

var a = new Array();

$("#grid1").clearGridData();

for (var i = sum; i < mydata.length; i++) {

a.push(mydata[i]);

}

for(var i=0;i

jQuery("#grid1").jqGrid('addRowData', i + 1, a[i]);

}

} else {

alert("请正确输入要跳转的页码!");

}

}

})

});

function pageWidth() {

if ($.browser.msie) {

return document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth;

} else {

return self.innerWidth;

}