首页 / WordPress函数讲解 / jQuery插件simplePagination的使用方法

jQuery插件simplePagination的使用方法

    • 珂李斯

    发布于

    by

    本文实例讲述了jQuery插件simplePagination的使用方法。分享给大家供大家参考，具体如下： 正…

    本文实例讲述了jQuery插件simplePagination的使用方法。分享给大家供大家参考，具体如下：

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

    simplePagination的使用

    HTML页面，

    <div class=”row”>
    <div class=”col-sm-12 col-sm-12″>
    <table class=”table table-striped table-hover table-bordered” data-toggle=”table” data-url=”data2.json” data-pagination=”true”>
    <thead>
    <tr>
    <th data-hide=”phone” >可用区</th>
    <th data-hide=”phone”>渠道</th>
    <th data-hide=”phone”>引用可用区</th>
    <th data-hide=”phone”>引用渠道</th>
    </tr>
    </thead>
    <tbody id=”region_price_list-data”>

    </tbody>
    </table>
    </div>
    </div>

    <div class=”row”>
    <div class=”col-sm-12″>
    <div id=”pagination”>
    </div>
    </div>
    </div>

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

    JS代码

    var page_count = 0;
    // 定义分页的页数
    var limit = 0 ;
    // 定义分页的条数
    var regionLogListFunc = function(pageNumber){
    if(pageNumber=== undefined){
    pageNumber = 1;
    }
    // 页数判断和定义
    $get(“/regionCopyList?page_number=”+ pageNumber,function(data,status){
    var #### = jQuery(“####-##”);
    // 获取Table中 tbody的id值
    var updateRegionlogList = ”
    // for in 遍历 对传入的数据进行显示
    for (var i in data){
    #### +='<tr class= “odd gradeX”>’;
    ##### +='<td data-hide =”phone”>’+data[i].##+'</td>’;
    ##### +='<td data-hide =”phone”>’+data[i].##'</td>’;
    #### +='<td data-hide =”phone”>’+data[i].##+'</td>’;
    #### +='<td data-hide =”phone”>’+data[i].##+'</td>’;
    updateRegionlogList +='</tr>’;
    }
    regionPriceList.empty();
    //  添加更新的数据
    regionPriceList.append(updateRegionlogList);
    });
    var onPageClick = regionLogListFunc;
    // 获取DOM文档ID
    jQuery(“#pagination”).pagination({
    item    :<%=z###%>, //ejs模板
    itemsOnPage :<%=#####t%> ,//ejs模板
    cssStyle  :’light-theme’,
    onPageClick :onPageClick,
    onInit   :regionLogListFunc,
    });
    });

    另外一种写法是

    var page_index;
    var itemsOnPage = 1;
    $(function() {
    $(“#pagination”).pagination({
    items: {$page_count}, 总页数
    itemsOnPage: itemsOnPage,
    cssStyle: ‘light-theme’,
    onInit: changePage,  // 初始化函数
    onPageClick: changePage  //点击时触发函数
    });
    });
    function changePage(page_index,event){
    listTable.gotoPage(page_index);  //gotoPage函数调用ajax获取数据 填充页面
    document.getElementById(‘pageCurrent’).innerHTML=page_index;
    return true;
    }

    希望本文所述对大家jQuery程序设计有所帮助。

    jQuery插件simplePagination的使用方法 (https://www.wpmee.com/) javascript教程 第1张

    类别：WordPress函数讲解、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT

    登录 账号发表你的看法，还没有账号？立即免费 注册


  • 还没有任何评论，赶紧来占个楼吧！