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

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

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

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

js:jq+jquery.dataTables.min.js

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

前端代码：

 
 
 
 
 
 
 

 
 
 


 

  

    批量删除
    添加用户
  

  

   
    查询
  

  

   

    

     

      

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

 后端代码:

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

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

�r(�s_�t)�q好的，我来解释下。 

前台：

首先我们的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，因为我们的数据都是从后台过来的，不是前台的静态数据，要开启“服务器模式”，这样，你每次对表格的操作，都会变成一次次的请求发送给服务器。

 后台：

后台负责提供数据源，使用自定义的DataTable类来作为格式化的数据进行交互。当然这里的DataTable类不是必须的，你只要满足前后数据交互的格式就可以，这里封装成一个类，是为了方便。

DT建议我们交互的数据格式，最起码要包含以下几项，我用匿名类来表示(区分大小写)：

new {

　　draw=***,
　　recordsTotal=***,
　　recordsFiltered=***,
　　data=***,

}

其他项的话，你可以根据自己的实际情况自行添加。

准备好了数据之后呢，把数据Json序列化后，返回给前端，即可。

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。