layui数据表格以及分页使用

原创 2018年04月17日 14:25:41

1、下载layui框架地址http://www.layui.com/

2、本人是在hbuilder中测试的,所以在hbuilder中新建web项目,加入下载好的layui框架文件,如下图所示。


3、http://www.layui.com/doc/modules/table.htmllayui开发文档中找到内置模块的数据表格。复制下面代码(如下代码表格的字段数我做了修改,对应后面json文件中的字段

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>layui</title>

  <meta name="renderer" content="webkit">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <link rel="stylesheet" href="css/layui.css"  media="all">

  <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->

</head>

<body>

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

<script src="layui.js" charset="utf-8"></script>

<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 --> 

<script>

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

  var table = layui.table;

  

  table.render({

    elem: '#test'

   ,url:'tableData.json'

    ,cols: [[

      {field:'id', width:80, title: 'ID', sort: true}

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

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

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

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

  

    ]]

    ,page: true

  });

});

</script>

 

</body>

</html>

4、更改代码中资源路径为自己的本地正确路径代码中红色标注处

5、在浏览器中查看发现数据接口异常,确实如此,这个例子是动态加载后端数据的。所以要配置后端服务接口。为了展示表格的效果我用加载本地文件的方式。

6、在项目根目录下新建json文件,(当然你可以在其他目录下新建但是正确配置第七步中所说的数据文件路径)复制如下代码作为表格数据

{

"code":0,

"msg":"ms",

"count":1000,

"data":[

{"id": 1, "username": "user-0", "sex": "", "city": "城市-0", "sign": "签名-0"},

{"id": 2, "username": "user-0", "sex": "", "city": "城市-0", "sign": "签名-0"},

{"id": 3, "username": "user-0", "sex": "", "city": "城市-0", "sign": "签名-0"},

{"id": 4, "username": "user-0", "sex": "", "city": "城市-0", "sign": "签名-0"},

{"id": 5, "username": "user-0", "sex": "", "city": "城市-0", "sign": "签名-0"},

{"id": 6, "username": "user-0", "sex": "", "city": "城市-0", "sign": "签名-0"},

{"id": 7, "username": "user-0", "sex": "", "city": "城市-0", "sign": "签名-0"},

{"id": 8, "username": "user-0", "sex": "", "city": "城市-0", "sign": "签名-0"},

{"id": 9, "username": "user-0", "sex": "", "city": "城市-0", "sign": "签名-0"},

{"id": 10, "username": "user-0", "sex": "", "city": "城市-0", "sign": "签名-0"},

{"id": 11, "username": "user-0", "sex": "", "city": "城市-0", "sign": "签名-0"},

{"id": 12, "username": "user-0", "sex": "", "city": "城市-0", "sign": "签名-0"},

{"id": 13, "username": "user-0", "sex": "", "city": "城市-0", "sign": "签名-0"},

{"id": 14, "username": "user-0", "sex": "", "city": "城市-0", "sign": "签名-0"},

{"id": 15, "username": "user-0", "sex": "", "city": "城市-0", "sign": "签名-0"},

{"id": 16, "username": "user-0", "sex": "", "city": "城市-0", "sign": "签名-0"}

]}

7、Html中修改数据文件所在路径,如下代码(如果你在其他路径下创建的json文件,请正确配置你自己的路径) 

 url:'tableData.json'

8、在浏览器中查看效果如下图

 

9、发现分页没有效果,这是正常情况。因为我们的数据是静态的,我们点击页码,虽然每次发出的请求是不同的,但是由于我们没有后端服务,所以我们的不同请求不会得到不同处理。为了说明这个情况,请打开浏览器调试窗口的NetWork选项卡,此时点击分页组件中的页码,发现有不同请求发出。

10、两个参数,一个page,另外一个limit,page指的是当前页码,limit值每页中数据的条数。如果我们有后端服务,就可以根据参数做出不同的处理,给出不同的返回数据。

11、其他参数详解请看帮助文档http://www.layui.com/doc/modules/table.html

12、有任何疑问欢迎留言

 

 

layui实现数据分页功能

官网layui table演示页面:http://www.layui.com/demo/table.html 示例截图: 页面引入layui.css、 layui.js   ...
  • ardo_pass
  • ardo_pass
  • 2017-12-02 12:58:02
  • 7504

关于layui数据表格的分页操作的学习笔记。

-----初识layui,一个强大的前端框架。 在使用layui框架的时候需要引用layui相关文件。这里不做叙述直接传送门:layui官网 在官方文档中介绍了三种初始化渲染方式 ...
  • qq_16767917
  • qq_16767917
  • 2017-09-19 10:58:44
  • 1648

TP5 实现查询数据库返回json数据(返回json数据函数实例)

TP5 实现查询数据库返回json数据(返回json数据函数实例) 一、把格式化json函数写到公共文件common.php中,common.php文件路径在:application/common.p...
  • haibo0668
  • haibo0668
  • 2017-09-22 18:35:38
  • 2747

ssm与layui表格数据绑定

今天主要学习了两个部分 一:轮播图片的后台管理 二:ssm与layui的表格数据绑定 一:采用了layer弹窗(父子页面) 父子操作时要理解DOM元素,用parent对象获取父元素的DOM,如...
  • qq_27631217
  • qq_27631217
  • 2017-12-31 22:43:44
  • 52

layui数据表格以及分页使用

1、下载layui框架地址http://www.layui.com/2、本人是在hbuilder中测试的,所以在hbuilder中新建web项目,加入下载好的layui框架文件,如下图所示。3、在ht...
  • qq_33643690
  • qq_33643690
  • 2018-04-17 14:25:41
  • 18

layui-分页

layui-分页
  • ajlgl
  • ajlgl
  • 2017-05-19 09:20:29
  • 852

layui分页数据表格渲染

最近需要对后台的数据进行分页渲染并且需要进行表头动态渲染,因此和小伙伴一起学习了layui的数据表格渲染,然后进行了改进,成功之后记录了下来 先说前端HTML和js代码 先下载layuijs文件,在...
  • ZksLoveLy
  • ZksLoveLy
  • 2018-01-30 09:40:42
  • 583

layui问题之渲染数据表格时,仅出现10条数据

一、问题 ajax获取服务端数据之后,要动态渲染table,但数据仅仅数显了10条,并没有渲染所有的数据。 二、经过 看一下表格需要的数据,0-9条的数据都自动有一个名为L...
  • yan263364
  • yan263364
  • 2018-01-05 15:40:59
  • 952

layer分页器使用

layui给我们提供了分页器的组件,进行简单的配置就能做出分页的效果上代码:// 点击查询按钮 开始显示表格内容 // 如果查询内容不存在 则显示为空 $('#searchBtn').click(fu...
  • DOCALLEN
  • DOCALLEN
  • 2017-03-12 17:10:10
  • 3614

layer table的分页条不展示

在一个切换中。要展示三个table,但是分页不展示 后面再测试中发现 会生成一个高度,就是因为这个高度的原因,才导致分页不展示,我在测试的时候就是把这个去掉了。 因为...
  • rendeyishi
  • rendeyishi
  • 2018-01-11 10:48:21
  • 468
收藏助手
不良信息举报
您举报文章:layui数据表格以及分页使用
举报原因:
原因补充:

(最多只允许输入30个字)