jQuery插件DataTable使用方法详解(.Net平台)

2020-05-27 18:02:35易采站长站整理

<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 "/"; }