童小鱼 通过本文主要向大家介绍了jQuery,DataTable等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
上一篇随笔提到了MvcPager,最近用到了一款前端JQ插件------DataTable（简称DT），很好用。
DT是一款前端插件，和后端完全分离开，就这点来看，我就特别喜欢。
一.使用DT，需要以下支持
js:jq+jquery.dataTables.min.js
二、页面上进行引入js，直接使用DT功能
前端代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>用户列表</title>
<link href="~/Content/Scripts/h-ui/css/H-ui.min.css" rel="stylesheet" />
<link href="~/Content/Scripts/h-ui.admin/css/H-ui.admin.css" rel="stylesheet" />
<link href="~/Content/Scripts/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" />
<style>
.page-container {
padding: 10px;
}
.operation {
background: #EFEEF0;
padding: 3px;
}
.search {
background: #EFEEF0;
padding: 5px;
margin-top: 5px;
}
.table {
margin-top: 10px;
}
.dataTables_info {
margin-left: 5px;
}
#table1_info {
padding: 0;
}
#table1_length {
margin-left: 15px;
}
</style>
<!--引入脚本解决兼容性(hack技术，必须放入head中)-->
<!--[if lt IE 9]>
<script src="~/Content/Scripts/html5_css3/html5shiv.min.js"></script>
<script src="~/Content/Scripts/html5_css3/respond.min.js"></script>
<script src="~/Content/Scripts/PIE-2.0beta1/PIE_IE678.js"></script>
<![endif]-->
</head>
<body>
<div class="page-container">
<div class="operation">
<a class="btn btn-danger radius" href="javascript:;"><i class="Hui-iconfont"></i> 批量删除</a>
<a class="btn btn-primary radius" href="javascript:;"><i class="Hui-iconfont"></i> 添加用户</a>
</div>
<div class="search">
<input type="text" id="nickname" class="input-text" style="width:100px;" placeholder="昵称">
<button id="search" class="btn btn-success" type="submit"><i class="Hui-iconfont"></i> 查询</button>
</div>
<div class="table">
<table id="table1" class="table table-border table-bordered table-bg table-hover">
<thead>
<tr class="text-c">
<th><input type="checkbox" name="" value=""></th>
<th>昵称</th>
<th>账号</th>
<th>密码</th>
<th>添加时间</th>
<th>修改时间</th>
<th>是否禁用</th>
<th>操作</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
<script src="~/Content/Scripts/jquery-2.0.3.min.js"></script>
<script src="~/Content/Scripts/datatables/1.10.13/jquery.dataTables.min.js"></script>
<script src="~/Content/Scripts/h-ui/js/H-ui.js"></script>
<script src="~/Content/Scripts/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript">
var table1 = null;
$(function() {
table1=initializeTable();
$("#search").click(function() {
table1.ajax.reload();
});
});
function initializeTable() {//初始化table
var table = $("#table1").DataTable({
/****************************************表格数据加载****************************************************/
"serverSide": true,
"ajax": {//ajax请求数据源
"url": "/UserInfo/Manager/Search",
"type": "post",
"data": function (data) {//添加额外的数据给服务器
data.pageIndex = (data.start / data.length) + 1;
data.nickname = $("#nickname").val().trim();
}
},
"columns": [//列绑定
{ "defaultContent": "" },
{ "data": "Nickname" },
{ "data": "LoginName" },
{ "data": "LoginPassword" },
{ "data": "AddTime" },
{ "data": "ModifyTime" },
{ "data": "IsForbidden" },
{ "defaultContent": "" }
],
"columnDefs": [//列定义
{
"targets": [0],
"data": "UserInfoId",
"render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
return "<input type='checkbox' value='" + data + "' name='UserInfoId'>";
}
},
{
"targets": [4],
"data": "AddTime",
"render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
if (data == null || data.trim() == "") { return ""; }
else { var date = new Date(parseInt(data.slice(6))); return date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate(); }
}
},
{
"targets": [5],
"data": "ModifyTime",
"render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
if (data == null || data.trim() == "") { return "/"; }
else { var date = new Date(parseInt(data.slice(6))); return date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate(); }
}
},
{
"targets": [6],
"data": "IsForbidden",
"render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
if (data) { return "是"; }
else { return "否"; }
}
},
{
"targets": [7],
"data": "UserInfoId",
"render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
return "<a style='text-decoration:none' class='ml-5 f-14' onclick=article_edit('资讯编辑','article-add.html','" + data + "') href='javascript:;' title='编辑'><i class='Hui-iconfont'></i></a>" +
"<a style='text-decoration:none' class='ml-5 f-14' onclick=article_del(this,'" + data + "') href='javascript:;' title='删除'><i class='Hui-iconfont'></i></a>";
}
},
{ "orderable": false, "targets": [0, 7] },// 是否排序
//{ "visible": false, "targets": [3, 5] }//是否可见
],
"rowCallback": function (row, data, displayIndex) {//行定义
$(row).attr("class", "text-c");
},
"initComplete": function (settings, json) { //表格初始化完成后调用
},
/****************************************表格数据加载****************************************************/
/****************************************表格样式控制****************************************************/
"dom": "t<'dataTables_info'il>p",//表格布局
"language": {//语言国际化
"lengthMenu": "每页 _MENU_ 条",
"zeroRecords": "没有找到记录",
"info": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_条",
"infoEmpty": "无记录",
"paginate":
{
"first": "首页",
"previous": "前一页",
"next": "后一页",
"last": "末页"
}
},
"pagingType": "full_numbers",//分页格式
"processing": true,//等待加载效果
"ordering": false,//排序功能
/****************************************表格样式控制****************************************************/
});
return table;
}
</script>
后端代码:
/****************Controller后台代码******************/ public ActionResult Search(DataTable dt,string nickname)