layui 使用table 不想使用table 自带的请求方法 #1880

LuoCore · 2024-05-09T07:07:23Z

LuoCore
May 9, 2024

议题条件

我确认已查看官方使用文档：https://layui.dev ，但没有找到相关解决方案。
我确认已在 Issues 中搜索过类似的问题，但没有找到相关解决方案。
我已仔细阅读： 🍀 Layui Issue 贡献指南

议题类型

功能请求

使用版本

2.9.9

问题描述

我自己写一个请求方法，不想使用table 中的ajax 请求方法
虽然可以使用data 赋值，但是分页就失效了。
能不能直接让我可以赋值data，也可以自己设置分页的总数量

业务代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  <link href="//unpkg.com/[email protected]/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<table class="layui-hide" id="ID-table-demo-data"></table>
  
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/[email protected]/dist/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  // 已知数据渲染
  var inst = table.render({
    elem: '#ID-table-demo-data',
    cols: [[ //标题栏
      {field: 'id', title: 'ID', width: 80, sort: true},
      {field: 'username', title: '用户', width: 120},
      {field: 'sign', title: '签名', minWidth: 160},
      {field: 'sex', title: '性别', width: 80},
      {field: 'city', title: '城市', width: 100},
      {field: 'experience', title: '积分', width: 80, sort: true}
    ]],
    data: [{ // 赋值已知数据
      "id": "10001",
      "username": "张三1",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "116"
    }, {
      "id": "10002",
      "username": "张三2",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "12",
      "LAY_CHECKED": true
    }, {
      "id": "10003",
      "username": "张三3",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "65"
    }, {
      "id": "10004",
      "username": "张三4",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "777"
    }, {
      "id": "10005",
      "username": "张三5",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "86"
    }, {
      "id": "10006",
      "username": "张三6",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "12"
    }, {
      "id": "10007",
      "username": "张三7",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "16"
    }, {
      "id": "10008",
      "username": "张三8",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "106"
    }],
    //skin: 'line', // 表格风格
    //even: true,
    page: true, // 是否显示分页
    limits: [5, 10, 15],
    limit: 5 // 每页默认显示的数量
  });
});
</script>

</body>
</html>

截图补充

No response

浏览器

Edge

演示地址

https://layui.dev/docs/2/table/#demo-data

友好承诺

我承诺将本着相互尊重、理解和友善的态度进行交流，共同维护 Layui 良好的社区氛围。

LSL1618 · 2024-05-09T08:25:17Z

LSL1618
May 9, 2024
Collaborator

也是可以的，除了要把ajax请求加载数据独立出来，还要把table的page属性设置成false，用独立的laypage来渲染分页栏，然后自己处理分页参数的传递，分页事件的执行。要拆分就只能彻底拆分，拆分成数据加载、表格渲染、分页栏渲染这3块，如果有搜索条件还需要在数据加载这块进行传参处理。

3 replies

LuoCore May 9, 2024
Author

把他拆分出来之后，table 显示的条数就不受控制了

LuoCore May 9, 2024
Author

你好像是对的，不过既然table 里面已经写好了那个方法，为什么不能公开出来使用呢？

LSL1618 May 9, 2024
Collaborator

这不是公不公开的问题，table组件内部集成了ajax数据加载和laypage分页栏，3者深度绑定了。要达到你的效果，table要采用data模式，然后ajax数据加载和laypage分页栏这2块要你自己在table之外单独处理。

hjingsuper · 2024-05-09T08:41:18Z

hjingsuper
May 9, 2024

参考：初始化不设定data，ajax后重载数据应该可以

3 replies

LuoCore May 9, 2024
Author

这个可以，但是无法设置分页的总数。
如我的data 是8条，但是我实际数据有99 条
分页哪里总数还是显示8条，应该要显示99 条才对的

hjingsuper May 9, 2024

大概能理解你的意思。就是数据库总条数99，经过查询条件只有8条数据。这个时候想分页总数还是99，但是查询结果只有8。
可以通过ajax放回data及总数，使用countText自定义总数区域文本。示例已更新https://codepen.io/hjingsuper/pen/mdYdVZG

LSL1618 May 9, 2024
Collaborator

@hjingsuper 你还遗漏了一点，分页栏事件没有做处理，比如上一页、下一页、指定页数、每页条数等等。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

layui 使用table 不想使用table 自带的请求方法 #1880

{{title}}

Replies: 2 comments 6 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

layui 使用table 不想使用table 自带的请求方法 #1880

LuoCore May 9, 2024

议题条件

议题类型

使用版本

问题描述

业务代码

截图补充

浏览器

演示地址

友好承诺

Replies: 2 comments · 6 replies

LSL1618 May 9, 2024 Collaborator

LuoCore May 9, 2024 Author

LuoCore May 9, 2024 Author

LSL1618 May 9, 2024 Collaborator

hjingsuper May 9, 2024

LuoCore May 9, 2024 Author

hjingsuper May 9, 2024

LSL1618 May 9, 2024 Collaborator

LuoCore
May 9, 2024

Replies: 2 comments 6 replies

LSL1618
May 9, 2024
Collaborator

LuoCore May 9, 2024
Author

LuoCore May 9, 2024
Author

LSL1618 May 9, 2024
Collaborator

hjingsuper
May 9, 2024

LuoCore May 9, 2024
Author

LSL1618 May 9, 2024
Collaborator