template-web.js 真分页绑定表格
Posted BarryLiang
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了template-web.js 真分页绑定表格相关的知识,希望对你有一定的参考价值。
<div class="layui-table-box">
<div class="layui-table-header">
<table cellspacing="0" cellpadding="0" border="0" class="layui-table">
<thead>
<tr class="layui-table-header">
<th width="25"><input type="checkbox" id="selectAll" value=""></th>
<th width="150">角色名称</th>
<th>学校</th>
<th>年级</th>
<th>班级</th>
<th>科目</th>
<th>用户</th>
<th>权限</th>
<th width="120">创建时间</th>
<th width="150">操作</th>
</tr>
</thead>
<tbody id="conlist"></tbody>
</table>
</div>
<div id="page" class="text-r"></div>
</div>
<div class="layui-table-header">
<table cellspacing="0" cellpadding="0" border="0" class="layui-table">
<thead>
<tr class="layui-table-header">
<th width="25"><input type="checkbox" id="selectAll" value=""></th>
<th width="150">角色名称</th>
<th>学校</th>
<th>年级</th>
<th>班级</th>
<th>科目</th>
<th>用户</th>
<th>权限</th>
<th width="120">创建时间</th>
<th width="150">操作</th>
</tr>
</thead>
<tbody id="conlist"></tbody>
</table>
</div>
<div id="page" class="text-r"></div>
</div>
<script id="oauthlist" type="text/html">
{{each data v i}}
<tr class="text-c" data-id="{{v.id}}">
<td><input type="checkbox" value="{{v.id}}" name="checkbox"></td>
<td>{{v.name}}</td>
<td>{{v.schoolName}}</td>
<td>{{v.gradeName}}</td>
<td>{{v.className}}</td>
<td>{{v.courseName}}</td>
<td>{{v.userName}}</td>
<td>{{v.roleName}}</td>
<td>{{v.createTime}}</td>
<td class="td-manage" style="font-size:18px">
<button onclick="admin_edit({{v.id}})" class="layui-btn layui-btn-primary layui-btn-radius" style="text-decoration:none">编辑</button>
<a onclick="admin_del(this,‘{{v.id}}‘)" class="layui-btn layui-btn-primary layui-btn-radius" style="text-decoration:none">删除</a>
@*<a title="编辑" href="javascript:;" onclick="admin_edit({{v.RI_ID}})" class="ml-5" style="text-decoration:none">编辑<i class="Hui-iconfont"></i></a>
<a title="删除" href="javascript:;" onclick="admin_del(this,‘{{v.RI_ID}}‘)" class="ml-5" style="text-decoration:none">删除<i class="Hui-iconfont"></i></a>*@
</td>
</tr>
{{/each}}
</script>
{{each data v i}}
<tr class="text-c" data-id="{{v.id}}">
<td><input type="checkbox" value="{{v.id}}" name="checkbox"></td>
<td>{{v.name}}</td>
<td>{{v.schoolName}}</td>
<td>{{v.gradeName}}</td>
<td>{{v.className}}</td>
<td>{{v.courseName}}</td>
<td>{{v.userName}}</td>
<td>{{v.roleName}}</td>
<td>{{v.createTime}}</td>
<td class="td-manage" style="font-size:18px">
<button onclick="admin_edit({{v.id}})" class="layui-btn layui-btn-primary layui-btn-radius" style="text-decoration:none">编辑</button>
<a onclick="admin_del(this,‘{{v.id}}‘)" class="layui-btn layui-btn-primary layui-btn-radius" style="text-decoration:none">删除</a>
@*<a title="编辑" href="javascript:;" onclick="admin_edit({{v.RI_ID}})" class="ml-5" style="text-decoration:none">编辑<i class="Hui-iconfont"></i></a>
<a title="删除" href="javascript:;" onclick="admin_del(this,‘{{v.RI_ID}}‘)" class="ml-5" style="text-decoration:none">删除<i class="Hui-iconfont"></i></a>*@
</td>
</tr>
{{/each}}
</script>
//分页事件
function rgpage(totle) {
layui.use([‘laypage‘, ‘layer‘], function () {
var laypage = layui.laypage
, layer = layui.layer;
laypage.render({
elem: ‘page‘
, count: totle//$("#total").html()
, limit: 20
, curr: currentPageAllAppoint
, first: ‘首页‘
, last: ‘尾页‘
, prev: ‘<em>←</em>‘
, next: ‘<em>→</em>‘
, theme: ‘#1E9FFF‘
, jump: function (obj, first) {
currentPageAllAppoint = obj.curr;
if (!first) {
var gguid = $("#gradeid").find("option:selected").val();
var cguid = $("#classid").find("option:selected").val();
var courseid = $("#course").find("option:selected").val();
$RoleManage.getRoleGroupList(gguid, cguid, courseid, obj.curr, 20, $("#key").val());
}
}
});
});
}
function rgpage(totle) {
layui.use([‘laypage‘, ‘layer‘], function () {
var laypage = layui.laypage
, layer = layui.layer;
laypage.render({
elem: ‘page‘
, count: totle//$("#total").html()
, limit: 20
, curr: currentPageAllAppoint
, first: ‘首页‘
, last: ‘尾页‘
, prev: ‘<em>←</em>‘
, next: ‘<em>→</em>‘
, theme: ‘#1E9FFF‘
, jump: function (obj, first) {
currentPageAllAppoint = obj.curr;
if (!first) {
var gguid = $("#gradeid").find("option:selected").val();
var cguid = $("#classid").find("option:selected").val();
var courseid = $("#course").find("option:selected").val();
$RoleManage.getRoleGroupList(gguid, cguid, courseid, obj.curr, 20, $("#key").val());
}
}
});
});
}
$.get("/admin/RoleManage/GetRoleGroupList", data, function (out) {
//填充试题总数
var totle = out.message;
$("#total").html(totle);
var html = template(‘oauthlist‘, out);
$("#conlist").html(html);
//加载分页方法
rgpage(totle);
})
return "{\"code\":\"" + code + "\",\"message\":\"" + message + "\",\"data\":[" + data + "]}";
以上是关于template-web.js 真分页绑定表格的主要内容,如果未能解决你的问题,请参考以下文章