富贵资源网 Design By www.hznty.com

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

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

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

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

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="/UploadFiles/2021-04-02/html5shiv.min.js">

 后端代码:

/****************Controller后台代码******************/
public ActionResult Search(DataTable dt,string nickname)
  {
   int total;
   int pageSize = dt.length;
   int pageIndex = dt.pageIndex;

   IQueryable<Model.UserInfo> userInfoIq=CurrentBllSession.UserInfoBll.GetIQueryableBySearchPage(pageIndex,pageSize,out total,nickname);
   List<Model.UserInfo> userInfoList = userInfoIq.ToList();
   dt.recordsTotal = total;
   dt.recordsFiltered = total ;
   dt.data = userInfoList;

   return Json(dt);
  }


/**************************Bll服务代码************************/
 public IQueryable<UserInfo> GetIQueryableBySearchPage(int pageIndex,int pageSize,out int total,string nickname)
  {
   IQueryable<UserInfo> 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
{
 /// <summary>
 /// JqueryDataTable插件交互的DT格式的数据(DT参数区分大小写)
 /// </summary>
 public class DataTable
 {
  /// <summary>
  /// 请求次数(前端==》后端)
  /// </summary>
  public int draw { get; set; }

  /// <summary>
  /// 总记录数(前端《==后端)
  /// </summary>
  public int recordsTotal { get; set; }

  /// <summary>
  /// 过滤后的总记录数(前端《==后端)
  /// </summary>
  public int recordsFiltered { get; set; }

  /// <summary>
  /// 记录开始索引(前端==》后端)
  /// </summary>
  public int start { get; set; }

  /// <summary>
  /// PageIndex(前端==》后端)
  /// </summary>
  public int pageIndex { get; set; }

  /// <summary>
  /// PageSize(前端==》后端)
  /// </summary>
  public int length { get; set; }

  /// <summary>
  /// 集合分页数据(前端《==后端)
  /// </summary>
  public IList data { get; set; } 
 }
}

这样就搞定了。。。是不是很简单(● ̄("#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序列化后,返回给前端,即可。

效果图:

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

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

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com