html异步访问后台,layui实现异步请求后台分页

使用layui实现异步请求后台分页操作，用到table和laypage两个模块，详细资料见官网。

直接贴代码，看起来比较简单，初次使用还是要费点心思的

HTML

查看

JavaScript

layui.extend({

request: "{/}/static/js/control/layui/myModules/request",

utils: "{/}/static/js/control/layui/myModules/utils",

});

var labelType = 0;

var searchContent;

$(function() {

initTableData();

$('.menu ul li').click(function() {

$(this).addClass('menuSelect').siblings().removeClass('menuSelect');

labelType = $(this).attr("itemid");

initTableData();

});

$('#search').click(function() {

searchContent = $('#searchContent').val();

initTableData();

});

});

function initTableData() {

layui.use(['jquery', 'table', 'layer', 'laypage', 'form', 'request', 'utils'],

function() {

$ = layui.jquery;

var request = layui.request;

var table = layui.table;

var laypage = layui.laypage;

var cols = [[{

type: "numbers",

title: '序号',

width: 60,

event: 'sel',

align: "center",

style: 'cursor: pointer;'

},

{

field: 'developcode',

title: '项目代码',

width: 190,

event: 'sel',

align: "center"

},

{

field: 'prjname',

title: '项目名称',

width: 190,

event: 'sel',

align: "center"

},

{

field: 'phasename',

title: '事项名称',

width: 190,

event: 'sel',

align: "center"

},

{

field: 'approvedate',

title: '申报时间',

event: 'sel',

align: "center"

},

{

field: 'flowphasestateStr',

title: '办理状态',

event: 'sel',

align: "center"

},

{

fixed: 'right',

title: '操作',

event: 'sel',

toolbar: "#barDemo",

align: "center"

}]];

function getbj(pages, searchVal) {

var param = {

page: pages,

limit: 15,

keyWords: searchVal,

type: labelType

};

request.ajaxAsync('/prjinfo/getbjdata', param, true,

function(res) {

if (res.status === 0) {

var totalNum = res.data.total;

table.render({

elem: '#table',

count: totalNum,

page: false,

limit: 15,

cols: cols,

first: true,

data: res.data.records,

done: function() {

laypage.render({

elem: 'footPageBox',

count: totalNum,

// 记得加这个，不然脚标一直在第一页

curr: pages,

limit: 15,

limits: [15, 20, 25],

jump: function(obj, first) {

if (!first) {

getbj(obj.curr, searchContent);

}

}

});

}

});

} else {

top.layer.msg(res.msg);

}

},

"get");

}

// 初始化第一页数据

getbj(1, "");

});

}

有些代码是多余的或者其他，自己捋一下逻辑就好，能看懂，不多说了。

欢迎批评，指正！