layui表格分页不生效(无法正常显示)怎么解决？下面本篇文章给大家介绍一下layui数据表格分页无法正常显示的解决方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
应该先利用layui table中的parseData方法手动将数据切片分页，代码如下,要点是parseData: function(res){}中的方法，对从url中get到的数据进行手动分页处理。layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'http://localhost:8099/getScoreRecord'
,title:'积分操作记录表'
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,cols: [[
{field:'sc_re_index',  title: '序号', sort: true}
,{field:'user_acc',  title: '账户名'}
,{field:'operate_value',  title: '积分数额', sort: true}
,{field:'rest_value',  title: '剩余积分'}
,{field:'sc__re_description', title: '备注'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
,{field:'operate_time', title: '积分操作时间', minWidth: 100, sort: true}
]]
,page: true
,limits: [3,5,10]  //一页选择显示3,5或10条数据
,limit: 10  //一页显示10条数据
,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
var result;
console.log(this);
console.log(JSON.stringify(res));
if(this.page.curr){
result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
}
else{
result=res.data.slice(0,this.limit);
}
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": result //解析数据列表
};
}
});
});
更多web前端知识，请查阅 HTML中文网 ！！

在上一篇文章中《“表妹”不美？那看一下专业表格怎么设计》，我们以表格为设计基础，从线条、配色、配图等多方面入手，对表格进行了视觉上升级美化。这种设计虽然美观，但是受限于传统表格样式，在形式上并没有突破。
优秀的设计师从不愿意拘泥于规矩，敢于打破现有形式，追求全新的视觉设计。
在本篇文章中，我们将脱离表格的样式，对表格进行拆分，为大家介绍卡片式表格设计，也叫做独立式表格设计。
独立式表格相对于传统的表格，形式上更美观和简洁，数据信息上更集中和直观，。因此，它更容易抓住观众的注意力，传统信息的效率更高。
我们以一张普通的表格为例，从表头美化、分类美化、强调突出、图片填充、三维美化五个方面，为大家演示表格拆分后的设计方法。
方法一：表头美化
我们浏览表格总是从表头开始，它具有吸引注意力和归类信息的作用。不惜牺牲页面空间，增加美表头的美观性，在枯燥的数据演示中，有助于帮助我们吸引观众的注意力。
方法二：分类美化
如果表格中的信息过多，将会增加阅读的难度，降低信息传播的效率。作为设计师的我们，在设计时，不仅要考虑美观，更需要考虑信息的易读性。我们可以通过添加色块和线条加以区分，引导视觉，帮助观众更轻松阅读你的信息。
方法三：强调突出
在表格中突出数据重点，形成对比，有助力于观众理解我们演示的重点是什么。通常，我们可以通过色块、边框、大小，与其它表格形成对比，来突出我们的重点信息。
方法四：图片填充
数据过于理性，让人觉得枯燥。而图片具有丰富的信息，它可以让数据富有感性色彩，让数据更加亲切和有趣。
方法五：立体美化
我们还可以突破二维平面，在三维上对表格进行立体美化，提升表格的空间感。
总结
对表格进行拆分，让我们获得了表格设计的新方法。无论是从信息传递，还是设计方法，独立式表格的设计手法更丰富，施展设计的空间更大。
最后，以上案例图片已经打包，供需要参考和练习的小伙伴们方便使用。
我还做了一页，我不知道怎么说了，也放在其中了。
只需要在后台回复关键词：“表格2”即可，网盘分享期限依然为7天
姊妹篇
《“表妹”不美？那看一下专业表格怎么设计》
一个小小的赞，从此你也是知乎人！
关注公众号：商业流沙，即送三大礼包，没有任何江湖套路

假如你是班里的考勤员，班主任要求用Excel表格你制作一份考勤表，对于没有制作过考勤表的你应该怎么去做一份考勤表呢？很简单！
建立电子表格，EXCEL表处理软件是美国微软公司研制的办公自动化软件OFFICE 中的重要成员，它能够方便的制作出各种电子表格，使用公式和函数对数据进行复杂的运算；用各种图表来表示数据直观明了；利用超级链接功能，用户可以快速打开局域网或Interner上的文件，与世界上任何位置的互联网用户共享工作薄文件。所以我们都会选择Excel表格来做考勤表等各类的表格。
1、打开你的Microsoft office Excel，选择A和B列先填上班里全部同学的学号和姓名。
2、再C、D列分别输入数字1、2。
3、连续选中数字1、2拖住右下角的十字架往右拖到31。
4、按住【Ctrl+A】全选表格单击右键设置表格的列宽，然后按【Ctrl+E】居中。
5、选择需要的表格部分设置边框线如下图所示，选择内边框和外边框。
6、然后点击【Ctrl+p】弹出打印页面查看即可进行预览~
简单几步就可以做好一份考勤表交给老师了~你学会了吗？掌握操作Excel的技巧能都让我们的办公效率事半功倍。
Excel表中的不同栏目的数据有各种类型，对于用户建表类似于日常习惯，不用特别指定，EXCEL 会自动区分数字型、文本型、日期型、时间型、逻辑型等。对于表格的编辑也非常方便，可任意插入和删除表格的行、列或单元格；对数据进行字体、大小、颜色、底纹等修饰。
对我们的办公真的有很大的方便啊~

今天分享一下bootstraptable的相关技能点，由于第一次接触，所以刚开始碰了好多壁，于是趁现在过去不久，先总结总结。
Bootstraptable简单的来说就是一个表格控件，但是这个表格可不是一般的表格，分页、排序、查询都自带了，你就给他一个json数据就可以了。
接下来我们就看看怎么用：

先在页面中引入所需的js文件和css文件

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>


在我们所需要展示数据的表格上价格id，或者class都可以，在这里我以id为例。

<table id="table"></table>


接下来就是给表格里面加数据了，我们可以在加载当前页面时利用ajax去请求控制器，查询所需要的数据，然后放在一个集合中，转换成json格式就可以了。

下面是js中相关代码：

$(function () {
     caseTable();
    });
   

//加载数据
function caseTable() {
    $('#table').bootstrapTable({
        method: "get",  		//提交方法
        striped: true,			//是否显示行间隔色
        cache:true,			//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性
        singleSelect: false,		//设置True 将禁止多选
        url: "/Home/GetAllAnJian",//查询的地址
        dataType: "json",			//服务器返回的数据类型
        pagination: true, 			//是否分页	
        pageSize: 5,				//页大小
        pageNumber: 1,			//当前页
        search: false, 				//显示搜索框
        contentType: "application/x-www-form-urlencoded",	//发送到服务器的数据编码类型
        queryParams:null,			//参数
        //    function (parms) {
        //    return {
        //        aid: $("#aid").val(),
        //    };
        //},
        columns: [
            
            {
                title: "案件编号",		//列标题
                field: 'aid',				//该列映射的data的参数名	
                align: 'center',			//水平对齐方式
                valign: 'middle',		//垂直对齐方式
                sortable: true			//是否排序

            },
            {
                title: '案件名称',
                field: 'aname',
                align: 'center',
                valign: 'middle',
                sortable: true
            },
            {
                title: '案件类型',
                field: 'atypename',
                align: 'center',
                valign: 'middle',
                sortable: true
            },
 {
                field: '',
                title: '操作',
                halign: 'center',
                align: 'center',
                width: '50px',			//宽度
                sortable: true,			//下面是单独加的按钮
                formatter: function (value,row,index) {
                    var e = '<button class="btn btn-primary" οnclick="tijiao(\'' + row.aid + '\')">提交</button>';
                    return e;
                },
            }]
    });
}


后台查询数据的代码（以asp mvc为例）：

控制器是：HomeController

请求数据的方法：

//查询所有的案件信息
public JsonResult GetAllAnJian(string aid)
{

List<AnJian> anAll = (from a in entity.AnJian
	where a.astatename.Equals("新建")
	select a).ToList();
//将日期类型转换成string类型
for (int i = 0; i < anAll.Count; i++)
	{
	anAll[i].adate_formate = anAll[i].adate.ToString();
	}
	return Json(anAll, JsonRequestBehavior.AllowGet);
	}

下面是演示图（数据随便填的）：


对了，另外结合layui使用更好用哦，时候不早了，明天在说结合layui使用的方法。