成都网站公司网站建设,东莞大岭山电子厂,宿迁做网站优化,网站灰色代码说到基于jQuery的ajax分页插件#xff0c;那我们就先看看主要的代码结构#xff1a;1、首先定义一个pager对象#xff1a;var sjPager window.sjPager {opts: {//默认属性pageSize: 10,preText: pre,nextText: next,firstText: First…说到基于jQuery的ajax分页插件那我们就先看看主要的代码结构1、首先定义一个pager对象var sjPager window.sjPager {opts: {//默认属性pageSize: 10,preText: pre,nextText: next,firstText: First,lastText: Last,shiftingLeft: 3,shiftingRight: 3,preLeast: 2,nextLeast: 2,showFirst: true,showLast: true,url: ,type: POST,dataType: JSON,searchParam: {},beforeSend: null,success: null,complete: null,error: function () {alert(抱歉,请求出错,请重新请求);},},pagerElement: null,//分页dom元素commonHtmlText: {//公共文本变量},init: function (obj, op) {//对象初始化},doPage: function (index, pageSize, searchParam) {//执行分页方法},getTotalPage: function () {//获取总页数},createPreAndFirstBtn: function (pageTextArr) {//创建上一页、首页按钮链接},createNextAndLastBtn: function (pageTextArr) {//创建下一页、尾页按钮链接},createIndexBtn: function (pageTextArr) {//中间分页索引按钮链接},renderHtml: function (pageTextArr) {//渲染分页控件到页面},createSpan: function (text, className) {//创建span},createIndexText: function (index, text) {//创建索引文本},jumpToPage: function () {//跳转到}}对象包含了分页的属性及用到的方法doPage()为分页的核心方法。2、进行jQuery扩展$.fn.sjAjaxPager function (option) {return sjPager.init($(this), option);};3、插件使用$(function() {$(#pager).sjAjaxPager({url: Handler1.ashx,pageSize: 10,searchParam: {/** 如果有其他的查询条件直接在这里传入即可*/id: 1,name:test,},beforeSend: function () {},success: function (data) {/**返回的数据根据自己需要处理*/var tableStr Id姓名年龄;$.each(data.items, function(i,v) {tableStr v.Id v.Name v.Age ;});$(#dataTable).html(tableStr);},complete: function () {}});})有没有发现使用方式与直接使用ajax基本是一样一样的最后我们可以看下出来的效果(表格样式没有设置比较丑分页样式自己也可以根据需要修改css文件)F12打开调试工具点击分页查看发送的请求及响应pageIndex和pageSize为插件默认的参数在后台可以直接在Request中获取。特别需要注意的是插件的响应也是需要遵循特定的格式{total:0,items:[]}如上图中所示total代表数据总记录数items代表分页的数据。这里只有代码的大体结构及呈现的效果大家不妨自己先动手实现一下。本条技术文章来源于互联网如果无意侵犯您的权益请点击此处反馈版权投诉本文系统来源php中文网
