layui table从后台接口获取数据应该怎样实现分页搜索。以及增删改查

 

我的效果图是这样的。

 

<!DOCTYPE html>
<html>
<head >
  <meta charset="utf-8">
  <title>用户维护</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="/lib/layui/css/layui.css" media="all">
 <style>
     .layui-table-tool-self{display:none}/*//工具栏右侧的导出不显示*/。这里我们不想要右边工具栏的导出打印。所以我就写了样式不让他显示了
 </style>
</head>
<body class="childrenBody">
    <!--工具栏-->
<div id="toolbar">
  <div class="layui-input-inline">
      <input class="layui-input" name="username" id="username" autocomplete="off" placeholder="姓名">
  </div>
  <div class="layui-input-inline">
    <input class="layui-input" name="mobile" id="mobile" autocomplete="off" placeholder="手机号">
  </div>
  
  <button type="button" class="layui-btn search" lay-event="search" ><i class="layui-icon">&#xe615;</i>查询</button>
  <button type="button" class="layui-btn layui-btn-normal add" lay-event="add"><i class="layui-icon">&#xe608;</i>新增</button>
</div> 

<!--表格-->
<table class="layui-hide" id="test" lay-filter="test"  lay-data="{id: 'test'}"></table>
 <div id="pagesize"></div>

<!--批量删除-->
<script type="text/html" id="toolbarDemo">
   <button class="layui-btn layui-btn-danger" lay-event="delete"><i class="layui-icon">&#xe640;</i>批量删除</button>
</script>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
              


<script src="/static/js/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="/lib/layui/layui.j

  • 0
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值