详解MVC如何使用开源分页插件(shenniu.pager.js)

前端之家收集整理的这篇文章主要介绍了详解MVC如何使用开源分页插件(shenniu.pager.js)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了;虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只能ip访问,没有域名哈哈),其架构组成由:aspnetcore1.0.0+redis+ postgressql+TaskMainForm服务,这个项目在后期会开源出来供大家分享学习,站点地址点这里心声网;一者是目前正在做的后台管理框架一叶子,现目前刚好吧js分页插件@L_403_0@'); } if (defOption.viewOption.url.length > 0) { var viewOption = $.extend({},defOption.viewOption); viewOption.url += "/" + item_val; viewOption.title += modalHeadText.length > 0 ? "-" + modalHeadText : ""; var op = JSON.stringify(viewOption); rows.push(''); } if (defOption.delOption.url.length > 0) { var delOption = $.extend({},defOption.delOption); delOption.url += "/" + item_val; delOption.title += modalHeadText.length > 0 ? "-" + modalHeadText : ""; var op = JSON.stringify(delOption); rows.push(''); } rows.push('

0) { var pager = []; pager.push('
= 1 ? data.CurrentPage - 1 : 1); pager.push('
  • IoUs" aria-controls="dynamic-table" tabindex="0" id="dynamic-table_prevIoUs">'); pager.push(' '); pager.push('
  • '); //当前页之前页码 var preTotal = data.CurrentPage - nPager >= 1 ? data.CurrentPage - nPager : 1; for (var i = preTotal; i < data.CurrentPage ; i++) { pager.push('
  • '); pager.push('
  • '); } //当前页 pager.push('
  • '); pager.push('
  • '); //当前页以后页码 var nextTotal = data.CurrentPage + nPager > data.PageTotal ? data.PageTotal : data.CurrentPage + nPager; for (var i = data.CurrentPage + 1; i <= nextTotal; i++) { pager.push('
  • '); pager.push('
  • '); } //
    下一页 var nnext = (data.PageTotal < data.CurrentPage + 1 ? data.PageTotal : data.CurrentPage + 1); pager.push(' '); pager.push(' '); //分页查询条件 pager.push('
    '); pager.push(' '); pager.push('
    '); pager.push('
    '); //移除加载中 //head.html(""); //添加结果 head.html(rows.join('')); $("div[id='divPager']").html(pager.join('')); //操作按钮事件 $("a[data-item]").on("click",function () { var data_Item = $(this).attr("data-item"); if (data_Item) { var data_Item_Obj = JSON.parse(data_Item); defOption.modalExt.modalFun({ width: data_Item_Obj.width,height: data_Item_Obj.height,url: data_Item_Obj.url,title: data_Item_Obj.title,callback: defOption.callback }); } }); //绑定分页按钮事件 $("a[name='npager']").on("click",function () { var nPager = $(this).attr("data-page"); if (nPager.length <= 0) { return; } $("form input[name='currentPage']").val(nPager); //执行请求后台 ajaxFun(defOption); }); } else { head.html("

    这个方法体挺长的,主要操作是:

    默认格式展示列表头部并呈现出加载中的提示=》绑定复选框全选事件=》创建数据返回成功函数sucFun()=》调用请求后台方法ajaxFun();

    再来看函数sucFun()等到数据返回后执行的操作是:

    遍历json返回数据展示到table中(其中包括了时间格式化的处理,复选框,label及操作按钮类型operate的初始化)=》页数展示及事件绑定(目前只有上一页,当前页之前页码,当前页,当前页以后页码,下一页的效果展示,分页查询条件(生成pagesize和currentPage隐藏控件),绑定分页按钮事件)

    以上就是shenniu.pager.js整个插件内容,不多且清晰,感觉分享给大家挺高兴,下面贴出示例中用到的js文件和css文件可以在这里

    以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

    原文链接:https://www.f2er.com/js/43458.html

    猜你在找的JavaScript相关文章