///<reference path="jquery-1.8.0.min.js" />
//加载函数
$(function () {
Nbook.load()
})
var Nbook =
{
load: function () {
Nbook.clci()
},
selectDat: function () {
var val
$.ajax({
type: "post",
dataType: "json",
data: { "method": "selectData", "Name": "'" + $.trim($("#Name").val())+"'" },
url: "ashx/test.ashx",
success: function (data) {
if (data != null) {
var html = ""
val = eval(data)
//console.log(book.length)
//for (var i = 0i <book.lengthi++) {
// html += "<ul class='main_Ul'><li>" + book[i].name + "</li><li>" + book[i].sch_id + "</li><li>" + book[i].sex + "</li><li>" + book[i].isOk + "</li></ul>"
//}
//$(".main").html(html)
layui.use('table', function () {
var table = layui.table
//展示已知数据
table.render({
elem: '#socialList'
, cols: [[ //表头
{ type: 'checkbox', fixed: 'left' },
{ field: 'name', title: '姓名', sort: true, fixed: 'left', unresize: true, sort: true, totalRowText: '合计' }
, { field: 'sch_id', title: '学校ID', sort: true, totalRow: true }
, { field: 'sex', title: '性别', sort: true, totalRow: true }
, { field: 'isOk', title: '是否OK' }
]],
data: val
, even: true
, page: true //是否显示分页
, toolbar: true //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
, limits: [3, 5, 7, 8, 10, 50]
, limit: 8 //每页默认显示的数量
, cellMinWidth: 80
, height: 'full-515'//设置表格最大高度
, totalRow: true//开启合计
})
})
}
}
})
},
clci: function ()
{
if ($.trim($("#Name").val()) == "")
{
Nbook.selectDat()
}
$("input[type='button']").click(function () {
Nbook.selectDat()
})
}
}
页面如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="myselect.aspx.cs" Inherits="WebTest.Demos.myselect" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<link href="layui-v2.4.5/layui/css/layui.css" type="text/css" rel="stylesheet" />
<title></title>
<style type="text/css">
* {
margin: 0
padding: 0
}
.main {
width: 100%
height: auto
border: 1px solid #DEDEDE
}
.main_Ul {
float: left
width: 100%
height: auto
border: 1px solid #DEDEDE
list-style: none
}
.main_Ul li {
float: left
width: 15%
height: 25px
border-right: 1px solid #DEDEDE
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="layui-row">
<div class="demoTable">
搜索ID：
<div class="layui-inline">
<input class="layui-input" name="Name" type="text" id="Name" value="" />
</div>
<input type="button" class="layui-btn btn" value="搜索" />
</div>
</div>
<table class="layui-hide" id="socialList" lay-filter="socialList"></table>
</form>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="layui-v2.4.5/layui/layui.js"></script>
<script type="text/javascript" src="myselect.js"></script>
</body>
</html>
一般处理程序如下：
using Models
using Newtonsoft.Json
using SqlSugar
using System.Linq
using System.Web
using WebTest.Dao
namespace WebTest.Demos.ashx
{
/// <summary>
/// test 的摘要说明
/// </summary>
public class test : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain"
string method = context.Request.Form["method"]
string names = context.Request.Form["Name"]
//names=names != string.Empty ? names : "(1==1)"
var JsonString = string.Empty
if (method == "selectData")
{
using (var db = SugarDao.GetInstance())
{
//.Where(i =>i.name == names)
var student = db.Queryable<Student>().ToList()
#region 查询数据
JsonString = "["
//lambda写法
for (int i = 0i <student.Counti++)
{
JsonString += "{"
JsonString += "\"name\":\"" + student[i].name + "\",\"sch_id\":\"" + student[i].sch_id + "\",\"sex\":\"" + student[i].sex + "\",\"isOk\":\"" + student[i].isOk + "\""
JsonString = (i == student.Count - 1) ? JsonString += "}" : JsonString += "},"
}
JsonString += "]"
#endregion
object jsonob = JsonConvert.SerializeObject(JsonString)
context.Response.Write(jsonob)
}
}
}
public bool IsReusable
{
get
{
return false
}
}
}
}
js实现：layui.use(['table','form'],
function()
{
$
=
layui.jquery
table
=
layui.table
tableIns
=
initTable()
})
//加载列表
function
initTable(){
//
执行渲染
tableIns
=
table.render({
id:
'idTest',
elem
:
'#deviceTable',
//
指定原始表格元素选择器（推荐id选择器）
size:
'lg',
height
:
'full-20',
//
容器高度
url
:
'/csCloud-admin/deviceController/getDeviceList.do',
where:
{
'orgId':$("#orgId").val(),
'coldNum':$("#coldNum").val(),
'devType':$("#devType").val(),
'isUsed':$("#isUsedId").val()
},
method
:
'post',
cols
:
[
[
//
标题栏
{
field
:
'rownum',
title
:
'序号',
width
:
100,
sort
:
true
},
{
field
:
'devNum',
title
:
'设备编号',
width
:
200
},
{
field
:
'devAlias',
title
:
'设备别名',
width
:
100
},
{
field
:
'devTypeVal',
title
:
'设备类型',
width
:
100
},
{
field
:
'devModel',
title
:
'设备型号',
width
:
100
},
{
field
:
'stateVal',
title
:
'设备状态',
width
:
100
},
{
field
:
'coldNum',
title
:
'冷库编号',
width
:
100
},
{
field
:
'orgName',
title
:
'所属机构',
width
:
300
},
{
field
:
'isUsedValue',
title
:
'状态',
width
:
100
},
{
fixed
:
'right',
width
:
300,
align:'center',
toolbar
:
'#barDemo'
}
]
],
//
设置表头
page
:
true,
limits
:
[
10,30,
60,
90,
150,
300
],
limit
:
10
})
return
tableIns
}
jsp实现：
<div
class="layui-fluid">
<div
class="layui-row">
<div
class="layui-col-lg12">
<table
id="deviceTable"></table>
</div>
</div>
</div>
以上这篇layui实现table加载的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:layui的table单击行勾选checkbox功能方法layui实现点击按钮给table添加一行layui结合form,table的全选、反选v1.0示例讲解
首先，最简单的先渲染一个表格，参考官方示例：
这里先讲讲一些渲染细节：
layui内部就是根据cols属性里面每项的field字段来输出数据（该字段跟后台返回的数据字段一致即可输出）。
另外，layui拼接html字符串的方式多次应用数组join方法的方式，这种方式值得安利一波：
否则用传统方式拼接html字符串就相形见绌了（不推荐）：
接着，看一下分页：
从图中可以看出，我们请求地址没加请求参数，layui自动帮我们添加了page，limit的请求参数，默认值分别为1, 10，这是开启了分页的缘故(page: true)。那么，请求参数名是否可以定制呢？答案是可以的，参考request属性：
同样，响应参数名也是可以定制的，参考response属性：
注意，以上只是定制了参数名字而已，接下来才是重头戏：定制数据格式，参考parseData属性：
parseData可以帮助我们定制好与layui对应的表格数据格式，从而输出表格，这是很有用的，毕竟后端前辈返回的数据格式未必跟layui的一致呀。有了以上3种定制方式，我们就不惧输出数据表格了。采用这种方式输出的就是真正的实现了分页，下文提及的方式可不是真正的分页。
-----------------------快乐的分割线，前方jojo高能-----------------------
可能也有小伙伴无视了 request、response、parseData 三剑客，转而用起了data属性，过程如下：
拒绝了使用url属性请求，转用jquery ajax请求数据，最后再tableIns.reload({ data: res.data })一波，达成666 *** 作。
这种做法从结果上看，似乎是可以的。。。。。。搭嘎，口头挖撸。
因为通过data属性赋值是不会分页去请求后端的，而是直接请求全部数据，然后layui内部进行前端分页处理，这样一来，如果数据量大的话，恐怕页面就要刷好一会儿了o(╥﹏╥)o。（只有通过data方式赋值才会进行前端分页处理，所以url方式可以放心食用）。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）