mvc ajax获取datatable,jQuery插件DataTable使用方法详解(.Net平台)

最新推荐文章于 2022-02-16 20:28:05 发布

Mis Young

最新推荐文章于 2022-02-16 20:28:05 发布

阅读量539

点赞数

文章标签： mvc ajax获取datatable

上一篇随笔提到了MvcPager,最近用到了一款前端JQ插件------DataTable(简称DT)，很好用。

DT是一款前端插件，和后端完全分离开，就这点来看，我就特别喜欢。

一.使用DT，需要以下支持

js:jq+jquery.dataTables.min.js

二、页面上进行引入js，直接使用DT功能

前端代码：

用户列表

.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;

}

 批量删除

 添加用户

 查询

昵称账号密码添加时间修改时间是否禁用操作

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

}

{

"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 "" +

"";

}

{ "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": "tp",//表格布局

"language": {//语言国际化

"lengthMenu": "每页 _MENU_ 条",

"zeroRecords": "没有找到记录",

"info": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_条",

"infoEmpty": "无记录",

"paginate":

{

"first": "首页",

"previous": "前一页",

"next": "后一页",

"last": "末页"

}

"pagingType": "full_numbers",//分页格式

"processing": true,//等待加载效果

"ordering": false,//排序功能

/****************************************表格样式控制****************************************************/

});

return table;

}

后端代码:

/****************Controller后台代码******************/

public ActionResult Search(DataTable dt,string nickname)

{

int total;

int pageSize = dt.length;

int pageIndex = dt.pageIndex;

IQueryable userInfoIq=CurrentBllSession.UserInfoBll.GetIQueryableBySearchPage(pageIndex,pageSize,out total,nickname);

List userInfoList = userInfoIq.ToList();

dt.recordsTotal = total;

dt.recordsFiltered = total ;

dt.data = userInfoList;

return Json(dt);

}

/**************************Bll服务代码************************/

public IQueryable GetIQueryableBySearchPage(int pageIndex,int pageSize,out int total,string nickname)

{

IQueryable userInfoIq= CurrentDal.GetIQueryable();

if (!string.IsNullOrEmpty(nickname))

{

userInfoIq=userInfoIq.Where(a => a.Nickname.Contains(nickname));

}

total=userInfoIq.Count();

userInfoIq=userInfoIq.OrderByDescending(a => a.AddTime);

userInfoIq=userInfoIq.Skip((pageIndex - 1)*pageSize).Take(pageSize);//分页前必须排序，不然EF报错

return userInfoIq;

}

using System;

using System.Collections;

using System.Collections.Generic;

using System.Linq;

using System.Text;

namespace ViewModel

{

///

/// JqueryDataTable插件交互的DT格式的数据(DT参数区分大小写)

///

public class DataTable

{

///

/// 请求次数(前端==》后端)

///

public int draw { get; set; }

///

/// 总记录数(前端《==后端)

///

public int recordsTotal { get; set; }

///

/// 过滤后的总记录数(前端《==后端)

///

public int recordsFiltered { get; set; }

///

/// 记录开始索引(前端==》后端)

///

public int start { get; set; }

///

/// PageIndex(前端==》后端)

///

public int pageIndex { get; set; }

///

/// PageSize(前端==》后端)

///

public int length { get; set; }

///

/// 集合分页数据(前端《==后端)

///

public IList data { get; set; }

}

这样就搞定了。。。是不是很简单(●￣(ｴ)￣●)

╮(╯_╰)╭好的，我来解释下。

前台：

首先我们的table只是给出了thead部分，那么tbody部分呢？交给DT来完成，由DT来控制。那么我们先来初始化DT，js会调用initializeTable()方法，方法里调用$("#table1").DataTable({各种配置})；来配置DT。至于这些配置的作用，我代码里都做了注释，详细的配置解释，可以查看官网的文档。

配置里有一项很重要，就是ajax配置项，这里是数据源的配置项，数据源可以有多种，我这里选用了ajax异步请求数据源。

"url":"/UserInfo/Manager/Search"这个是配置了DT请求数据的url地址

"type":"post"指明了以post方式发送请求

"data":

function (data) {

//添加额外的数据给服务器

data.pageIndex = (data.start / data.length) + 1;

data.nickname = $("#nickname").val().trim();

}

这了由于我用到了搜索的功能，所以每次请求数据的时候，要把搜索的条件作为附加的数据传给服务器

最后，注意要加上"serverSide": true，因为我们的数据都是从后台过来的，不是前台的静态数据，要开启“服务器模式”，这样，你每次对表格的操作，都会变成一次次的请求发送给服务器。

后台：