资讯专栏INFORMATION COLUMN

jQuery插件simplePagination的使用-踩坑记_03

罗志环 / 706人阅读

摘要:插件的使用正在熟悉项目上的代码,新添加了一个需要,需要对表单进行分页,之前的代码中是有分页的代码的,看了老半天,也没看太明白。

jQuery插件simplePagination的使用

正在熟悉项目上的代码,新添加了一个需要,需要对表单进行分页,之前的代码中是有分页的代码的,看了老半天,也没看太明白。之前的项目比较久远,继续熟悉代码。

simplePagination的使用

HTML页面,

</>复制代码

  1. 可用区渠道引用可用区引用渠道

因为项目里用到EJS--HTML模板,记得在一开始就引用SimplePagination插件,这个比较简单,就不细说了。

JS代码

</>复制代码

  1. var page_count = 0;
  2. // 定义分页的页数
  3. var limit = 0 ;
  4. // 定义分页的条数
  5. var regionLogListFunc = function(pageNumber){
  6. if(pageNumber=== undefined){
  7. pageNumber = 1;
  8. }
  9. // 页数判断和定义
  10. $get("/regionCopyList?page_number="+ pageNumber,function(data,status){
  11. var #### = jQuery("####-##");
  12. // 获取Table中 tbody的id值
  13. var updateRegionlogList = ""
  14. // for in 遍历 对传入的数据进行显示
  15. for (var i in data){
  16. #### +="";
  17. ##### +=""+data[i].##+"";
  18. ##### +=""+data[i].##"";
  19. #### +=""+data[i].##+"";
  20. #### +=""+data[i].##+"";
  21. updateRegionlogList +="";
  22. }
  23. regionPriceList.empty();
  24. // 添加更新的数据
  25. regionPriceList.append(updateRegionlogList);
  26. });
  27. var onPageClick = regionLogListFunc;
  28. // 获取DOM文档ID
  29. jQuery("#pagination").pagination({
  30. item :<%=z###%>, //ejs模板
  31. itemsOnPage :<%=#####t%> ,//ejs模板
  32. cssStyle :"light-theme",
  33. onPageClick :onPageClick,
  34. onInit :regionLogListFunc,
  35. });
  36. });

另外一种写法是

</>复制代码

  1. var page_index;
  2. var itemsOnPage = 1;
  3. $(function() {
  4. $("#pagination").pagination({
  5. items: {$page_count}, 总页数
  6. itemsOnPage: itemsOnPage,
  7. cssStyle: "light-theme",
  8. onInit: changePage, // 初始化函数
  9. onPageClick: changePage //点击时触发函数
  10. });
  11. });
  12. function changePage(page_index,event){
  13. listTable.gotoPage(page_index); //gotoPage函数调用ajax获取数据 填充页面
  14. document.getElementById("pageCurrent").innerHTML=page_index;
  15. return true;
  16. }

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/52984.html

相关文章

  • jQuery插件simplePagination使用_03

    摘要:插件的使用正在熟悉项目上的代码,新添加了一个需要,需要对表单进行分页,之前的代码中是有分页的代码的,看了老半天,也没看太明白。 jQuery插件simplePagination的使用 正在熟悉项目上的代码,新添加了一个需要,需要对表单进行分页,之前的代码中是有分页的代码的,看了老半天,也没看太明白。之前的项目比较久远,继续熟悉代码。 simplePagination的使用 HTML页面...

    NotFound 评论0 收藏0
  • vue-cli +webpack+vue-router 坑记

    摘要:其中定义了一些命令,还记得我们初始化项目完成后执行其实就是执行简单的来说是运行时依赖生产环境,是开发时的依赖开发环境相应的在安装包时,有两种命令参数可以把它们的信息写入文件,会把依赖包名称添加到文件键下,则添加到文件键下。 这次主要是记录下自己在做vue-cli +webpack +vue-router 的经历 以及一些踩过的坑,算是做一个简单的总结 一.vue的基本介绍 1)渐进式的...

    OpenDigg 评论0 收藏0
  • vue-cli3.x 新特性及坑记

    摘要:前言都到了,所以是时候玩转一下的新特性了。安装的包名称由改成了。方法一原因的配置改变了,导致正确的不能用。打开终端,切换到根路径文件里面修改为方法二是默认路径修改了路径会出现错误。按上面的方法修改完,再全局卸载果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....

    xiaoqibTn 评论0 收藏0
  • webpack4 坑记

    最近偶然想学习下webpack的配置,于是走上了webpack4踩坑的不归路。。。 webpack4默认的特性: 配置默认初始化一些配置, 比如 entry 默认 ./src 开发模式和发布模式, 插件默认内置 CommonsChunk 配置简化 使用 ES6 语法,比如 Map, Set, includes 新增 WebAssembly 构建支持 如果要使用 webpack cli 命令,...

    lookSomeone 评论0 收藏0

发表评论

0条评论

罗志环

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<