jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解

简单的两个步骤即可实现分页功能

 <script src="<%=basePath%>/resources/js/jquery-1.7.1.min.js"></script>
 <script src="<%=basePath%>/resources/js/jquery.loehpagerv1.0.js"></script>
 <script type="text/JavaScript">
//回调里面进行业务处理
 function loehpagercallback(data) {
  alert('这里处理回调的data');
  }
 $(function() {
 $('#customerPager').LoehPagerPlugin({
  'color': 'gray',
  'fontSize': '15px',
  'totalCount':<%=totalpage%>,
   'pageSize':'15',
   'ajaxCallBack':'loehpagercallback',
   'ajaxRequestParameter':'name=leohpager&age=10',
   'ajaxOriginalParameter':'name=leohpager&age=10',
   'ajaxUrl':'<%=basePath%>/ipload?path=data'
 });
 });
 </script>
 <html>
  <body>
  <div id="customerPager" style="position: relative;top: -25px;left: 220px;" > </div>
  </body>
 </html>

totalCount':<%=totalpage%>:总页是第一次加载页面时查询出的分页表的总页数。

'ajaxCallBack':'loehpagercallback':这里设置回调方法，你可以将方法名修改任意你在调用页定义的js方法

'ajaxRequestParameter':'name=leohpager&age=10':

'ajaxOriginalParameter':'name=leohpager&age=10',

上面两个参数,第一个是ajax请求数据时的参数，它是由第二个参数拼接上当前选择的页面组合而成。

版本1.0,简单的几句代码既可以实现分页功能，后续有时间会继续更新。

以上所述是小编给大家介绍的jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解，希望对大家有所帮助，如果打有任何疑问欢迎给我留言，小编会及时回复大家的。

赞 (0)

相关推荐

  • 基于jQuery封装的分页组件

    基于jQuery封装的分页组件

    由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页效果. 1.page.init.css @charset "utf=8"; *{ box-sizing: border-box; padding: 0; margin: 0; } .page{ font-size: 13px; text-align: right; } .page .page_to

  • jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解

    jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解

    简单的两个步骤即可实现分页功能 <script src="<%=basePath%>/resources/js/jquery-1.7.1.min.js"></script> <script src="<%=basePath%>/resources/js/jquery.loehpagerv1.0.js"></script> <script type="text/JavaScript

  • jQuery EasyUI 组件加上“清除”功能实例详解

    jQuery EasyUI 组件加上“清除”功能实例详解

    1.背景 在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择.不允许手动输入,这时只要在组件选项中加入 editable:false 就可以实现,但有一个问题,就是:一旦选择了,没办法清空.经过研究,可以用一个变通的解决方案:给组件加上一个"清除"按钮,当有值是,显示按钮,点击按钮可清空值,当无值是,隐藏按钮. 2.函数定义 定义JS

  • vue3.2自定义弹窗组件结合函数式调用示例详解

    vue3.2自定义弹窗组件结合函数式调用示例详解

    目录 前言 手写弹窗组件 组件调用 函数式调用 如何使用 含样式完整源码 效果图 前言 涉及的vue3知识点/API,createApp defineProps defineEmits <script setup> v-model <script setup> 就是 setup 语法糖 defineProps 和 props 用法差不多 defineEmits 声明可向其父组件触发的事件 手写弹窗组件 很简单的弹窗组件,支持设置标题 <script setup> def

  • jQuery中text() val()和html()的区别实例详解

    jQuery中text() val()和html()的区别实例详解

    简单的说:html()和text()的区别主要在于是否包含标签.而val()针对的是表单元素. 但是有时还是不是那么太清晰. html(),val(),text()都分为有参和无参. 举例说明它们的不同之处: html()在没有参数的情况下,取得第一个匹配元素的内容.必须要注意的是,即使匹配多个,也只能取得匹配的第一个元素. 如: <body> <p>你选中这段文字后,看看它们的文本颜色和背景色,就能明白::selection的作用.</p> <h3>选中下

  • Bootstrap分页插件之Bootstrap Paginator实例详解

    Bootstrap分页插件之Bootstrap Paginator实例详解

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作.目前经过测试的浏览器包括: Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+. 官网地址:http://bootstrappaginator.org/ DownloadVisit Project in

  • Vue自定义全局Toast和Loading的实例详解

    如果我们的Vue项目中没有用到任何UI框架的话,为了更好的用户体验,肯定会用到loading和toast.那么我们就自定义这两个组件吧. 1.Toast组件 首先,在common下新建global文件夹,存放我们的toast.vue和toast.js两个文件(当然文件的具体位置你可以自行安排). (1). toast.vue <template lang="html"> <div v-if="isShowToast" class="toa

  • Android自定义View中attrs.xml的实例详解

    Android自定义View中attrs.xml的实例详解 我们在自定义View的时候通常需要先完成attrs.xml文件 在values中定义一个attrs.xml 然后添加相关属性 这一篇先详细介绍一下attrs.xml的属性. <?xml version="1.0" encoding="utf-8"?> <resources> //自定义属性名,定义公共属性 <attr name="titleText" for

  • 为Vue3 组件标注 TS 类型实例详解

    目录 为 props 标注类型 使用 <script setup> 非 <script setup> 为 emits 标注类型 使用 <script setup> 非 <script setup> 为 ref() 标注类型 默认推导类型 通过接口指定类型 通过泛型指定类型 为 reactive() 标注类型 默认推导类型 通过接口指定类型 为 computed() 标注类型 默认推导类型 通过泛型指定类型 为事件处理函数标注类型 为 provide / in

  • vue组件间的参数传递实例详解

    场景分析 在前端开发中,我们常常会运用到"组件库".在main入口中引入组件库,就可以很轻松的在页面中引入,并做一些基本的配置,如样式,颜色等.只需要在引入的组件中写入特定的属性,就能够定义. 举例说明 例如:element-ui组件库中使用switch开关,有个属性active-color是设置"打开时"的背景色.change事件是触发状态的事件. <el-switch v-model="value" :active-color=&quo

  • AJAX原理以及axios、fetch区别实例详解

    AJAX原理以及axios、fetch区别实例详解

    目录 AJAX原理 Promise封装Ajax JQ Ajax.Axios.Fetch的核心区别 JQuery Ajax Axios Fetch 补充:为什么要用axios? 总结 AJAX原理 Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎),通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.使用户操作与服务器响应异步化. Ajax的过程只涉及JavaScript.XMLHttpRequest和

随机推荐