jquery ajax分页插件的简单实现

说到基于jQuery的ajax分页插件，我们先来看看主要的代码结构：

1.首先，定义一个寻呼机对象：

var SJ Pager=window . SJ Pager={ opts : {//默认属性pagesize: 10，pretext3360' pre '，nexttext3360' next '，firsttext3360' first '，lastText: 'Last '，shiftingLeft: 3，shiftingRight: 3，preLeast: 2，nextLeast: 2，showFirst: true，showLast: true，Url 333。);}、}、pageelement: null、//分页dom元素commonhtml text 3360 {//公共文本变量}、init3360function (obj，op){//对象初始化}、doPage: function (index、PageSize、searchParam) {//执行分页方法}、get total page : function(){//获取总页数}、创建preandfristbtn 3360 function(page textarr){//创建上一页和主页的按钮链接}、Create next create span : function (text，classname) {//create span}、createindextext 3360 function(index，text) {//create index text}、jump page 3360 function(){//jump to } }对象包含分页的属性和使用的方法。 doPage()是分页的核心方法。

2.扩展jQuery。

$ . fn . sjajaxpager=function(option){ return SJ pager . init($(this)，option)；};3.插件的使用。

body table id='dataTable '边框=' 1px '/table div id=' pager '/div/body $(function(){ $(' # pager ')。sjAjaxPager({ URL : ' handler 1 . ashx '，Pagesize : 10，searchparam : {/* *如果有其他查询条件，可以直接在这里导入*/id: 1，name:' test '，}，beforesend3360function () {}，Success: function (data) {/* *返回的数据根据自己的需要进行处理*/var tabletr=' trtdId/tdtd name/$.每个(数据项，函数(I，v){ tableStr=' trtd ' v . Id '/tdtd ' v . Name '/tdtd ' v . Age '/TD/tr '；});$('#dataTable ')。html(TabStr)；}，complete : function(){ } })；})你有没有发现使用ajax和直接使用Ajax基本一样？

最后可以看到效果：(如果不设置表格样式就难看了，分页样式还可以根据需要修改css文件)。

F12打开调试工具，单击分页查看发送的请求和响应：

页面索引和页面大小是插件的默认参数，可以在后台的Request中直接获取。需要注意的是，插件的响应也需要遵循特定的格式{'total':0，' items':[]}。如上图所示，total表示数据记录的总数，items表示分页数据。

只有代码的大致结构和呈现效果，不妨自己体会一下。