Layui表格排序例子

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport"

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<title>layui在线调试</title>

<link rel="stylesheet" href="../src/css/layui.css?t=1535898708529" media="all">

<style>

body {

margin: 10px;

}

.demo-carousel {

height: 200px;

line-height: 200px;

text-align: center;

}

</style>

</head>

<body>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script src="../src/layui.js?t=1535898708529"></script>

<script>

layui.use(['table'], function (table) {

var dataTemp = [

{id: 1},

{id: 2},

{id: 3},

{id: 4},

{id: 10},

{id: 11},

{id: 12},

{id: 13},

{id: 5},

{id: 6},

{id: 7},

{id: 8},

{id: 9},

{id: 14},

{id: 15}

];

//执行一个 table 实例

var tableIns = table.render({

elem: '#test'

, height: 420

// ,url: '/demo/table/user/' //数据接口

, data: dataTemp

, title: '用户表'

, page: true //开启分页

, toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档

, totalRow: true //开启合计行

, cols: [[ //表头

{type: 'checkbox', fixed: 'left'}

, {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', totalRowText: '合计：'}

, {field: 'username', title: '用户名', width: 80}

, {field: 'experience', title: '积分', width: 80, sort: true, totalRow: true}

, {field: 'sex', title: '性别', width: 80, sort: true}

, {field: 'score', title: '评分', width: 80, sort: true, totalRow: true}

, {field: 'city', title: '城市', width: 150}

, {field: 'sign', title: '签名', width: 200}

, {field: 'classify', title: '职业', width: 100}

, {field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}

, {fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo'}

]]

});

table.on('sort(test)', function (obj) {

// 对原始数据进行排序处理

var dataNew = obj.type ? layui.sort(dataTemp, obj.field, obj.type === 'desc') : dataTemp;

// reload表格

tableIns = table.reload('test', {

initSort: obj

, data: dataNew

, page: {

curr: 1

}

});

})

});

</script>

</body>

Layui表格排序例子相关推荐

解决layui表格排序与后台数据返回顺序不一致
一直想让"总计"的数据处在第一行,后台返回的结果中,总计是排在第一位的,但数据返回之后layui表格又重新排序一遍,因为是以升序排列,总计的总消费是最多的,导致"总计&q ...
layui表格排序扩展自定义排序规则
layui框架表格只支持数字排序,不能支持自定义排序,于是自己修改table.js模块源码增加了自定义排序功能最开始研究修改的是layui2.1.2版本的 table.js 由于项目用的是layui ...
layui 表格在点表头排序时数据错乱
layui 表格在点表头排序时数据错乱问题问题描述: 在layui表格中,最后一列增加了操作按钮,并且在某些行设置了样式,但是在排序之后,按钮的点击事件失效了,样式也没有了,可能是没有执行done回 ...
layui表格点击排序按钮后，表格绑定事件失效解决方法
layui表格点击排序按钮后,表格绑定事件失效解决方法参考文章: (1)layui表格点击排序按钮后,表格绑定事件失效解决方法 (2)https://www.cnblogs.com/gongliha ...
layui表格（table）排序
layui表格本身提供sort排序,但是只能排序当前一页:如果后台返回几十页数据,需要排序显示,该如何做呢,这里闲心大神提供了一个sort监听方法: 通过监听排序的列,把对应的参数传给后台,然后重渲染 ...
layui表格设置默认排序_改造 layui 表格组件实现多重排序
layui 的表格组件目前只支持单列排序,在实际应用中并不能很好的支撑我们的业务需求.今天一时手痒,决定改造一番以支持多重排序. 实现思路也比较简单,只需要用一个数组来存放所有排序的列,再把这个数组传 ...
layui表格更改一列数据_【WEB前端开辟】layui表格数据变动的一种处理方式
表格数据更改,平常包括几个内容:新增.修正.删除.挪动,开辟中常常会面对的一个题目就是更改以后怎样将数据同步到节点上,一向以来个人的提议照样应用表格重载,不管是url情势的照样data情势的实际都是须 ...
表格排序——tablesorter.js使用(支持中文排序)
2019独角兽企业重金招聘Python工程师标准>>> 最近,因为项目需要,对表格排序做了一下摸索,整理如下: 1. 首先,可从官网下载tablesorter.js,但并不支持中文的 ...
layui表格使用：经验总结（含案例、代码、截图）
文章目录 layui表格使用:经验总结(含案例.代码.截图) 一.原生table案例 1.1. 原生table案例 · 效果截图: 1.2. 原生table案例 · 代码示下: 二.案例转化:layu ...

Layui表格排序例子

Layui表格排序例子相关推荐

最新文章

热门文章