zoukankan      html  css  js  c++  java
  • layui分页调用方法

    let rel_params = {page:1}, list_data = '', list_length = 0, curr = 1;

    function getData(params) {

    $.ajax({
    type: 'POST',
    url: '接口地址',
    data: params,
    success: function (ret) {
    console.log(ret)
    if (ret.code == 0) {
    list_data = ret.data;
    list_length = ret.count;
    loadPage();
    } else {
    layer.msg(ret.msg, {offset: '15px', icon: 2, time: 1000});
    }
    }
    });
    }
    getData(rel_params);

    window.loadPage = function(){
    laypage.render({
    elem: 'my-page-box'  //页数显示box
    ,count: list_length  //总数据条数
    ,limit: 20  // 一页显示条数
    ,curr:curr  //当前第几页
    ,jump: function(obj,first){
    console.log(list_data, list_length);
    if(first){
    //模拟渲染
    document.getElementById('my-body').innerHTML = function(){
    var arr = []
    // ,thisData = list_data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
    layui.each(list_data, function(i, item){
    // console.log(i, item)
    arr.push('<ul class="list display-row">'+
    '<li>'+
    '<div class="display-row"><span class="my-tip">&nbsp;</span><span class="my-font-sm m-b">'+ item.title + (item.spec ? '-' + item.spec : '') +'</span></div>'+
    '<div class="display-row" style="align-items:center;"><span class="my-tip color-blue">' + item.number + '</span><span class="my-bar my-bg-blue" style="' + item.number_percentage + '%;"></span></div>'+
    '<div class="display-row" style="align-items:center;"><span class="my-tip color-yellow">' + item.sum_number + '</span><span class="my-bar my-bg-yellow" style="' + item.sum_number_percentage + '%;"></span></div>'+
    '</li>'+
    '<li><span style="100%; text-align:left;">'+ item.title + (item.spec ? '-' + item.spec : '') +'</span></li>'+
    '<li>' + item.goodssn + '</li>'+
    '<li>'+item.number+'</li>'+
    '<li>' + item.sum_number + '</li>'+
    '<li>' + parseInt(item.sum_money * 100) / 100 + '</li>'+
    '</ul>');
    });
    return arr.join('');
    }();
    }else{
    console.log('b')
    rel_params.page = obj.curr;
    curr = obj.curr;
    getData(rel_params);
    }
    }
    });
    }

  • 相关阅读:
    12.Docker网络类型
    博客迁移
    java注解
    IO多路复用技术(multiplexing)
    Java 中extends与implements使用方法
    初识autoconf
    初识swoole
    简单配置nginx使之支持pathinfo
    vue-cli 脚手架 安装过程
    PHP阻止页面后退如何用PHP实现禁用浏览器的后退,使后退的页面失效或链接到别的地方?使用php禁止浏览器缓存?
  • 原文地址:https://www.cnblogs.com/hjjjjhd/p/14505132.html
Copyright © 2011-2022 走看看