欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery插件DataTable使用方法詳解(.Net平臺(tái))

 更新時(shí)間：2016年12月22日 08:42:54   作者：童小魚(yú)  
這篇文章主要為大家詳細(xì)介紹了jQuery插件DataTable使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

上一篇隨筆提到了MvcPager,最近用到了一款前端JQ插件------DataTable（簡(jiǎn)稱(chēng)DT），很好用。

DT是一款前端插件，和后端完全分離開(kāi)，就這點(diǎn)來(lái)看，我就特別喜歡。

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

js:jq+jquery.dataTables.min.js

 二、頁(yè)面上進(jìn)行引入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>用戶(hù)列表</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技術(shù)，必須放入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">&#xe6e2;</i> 批量刪除</a>
   <a class="btn btn-primary radius" href="javascript:;"><i class="Hui-iconfont">&#xe600;</i> 添加用戶(hù)</a>
  </div>

  <div class="search">
   <input type="text" id="nickname" class="input-text" style="width:100px;" placeholder="昵稱(chēng)">
   <button id="search" class="btn btn-success" type="submit"><i class="Hui-iconfont">&#xe665;</i> 查詢(xún)</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>昵稱(chēng)</th>
      <th>賬號(hào)</th>
      <th>密碼</th>
      <th>添加時(shí)間</th>
      <th>修改時(shí)間</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({
   /****************************************表格數(shù)據(jù)加載****************************************************/
   "serverSide": true,
   "ajax": {//ajax請(qǐng)求數(shù)據(jù)源
    "url": "/UserInfo/Manager/Search",
    "type": "post",
    "data": function (data) {//添加額外的數(shù)據(jù)給服務(wù)器
     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) {//全部列值可以通過(guò)full.列名獲取,一般單個(gè)列值用data PS:這里的render是有多少列就執(zhí)行多少次方法。。。不知道為啥
      return "<input type='checkbox' value='" + data + "' name='UserInfoId'>";
     }
    },
    {
     "targets": [4],
     "data": "AddTime",
     "render": function (data, type, full) {//全部列值可以通過(guò)full.列名獲取,一般單個(gè)列值用data PS:這里的render是有多少列就執(zhí)行多少次方法。。。不知道為啥
      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) {//全部列值可以通過(guò)full.列名獲取,一般單個(gè)列值用data PS:這里的render是有多少列就執(zhí)行多少次方法。。。不知道為啥
      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) {//全部列值可以通過(guò)full.列名獲取,一般單個(gè)列值用data PS:這里的render是有多少列就執(zhí)行多少次方法。。。不知道為啥
      if (data) { return "是"; }
      else { return "否"; }
     }
    },
    {
     "targets": [7],
     "data": "UserInfoId",
     "render": function (data, type, full) {//全部列值可以通過(guò)full.列名獲取,一般單個(gè)列值用data PS:這里的render是有多少列就執(zhí)行多少次方法。。。不知道為啥
      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'>&#xe6df;</i></a>" +
       "<a style='text-decoration:none' class='ml-5 f-14' onclick=article_del(this,'" + data + "') href='javascript:;' title='刪除'><i class='Hui-iconfont'>&#xe6e2;</i></a>";
     }
    },

    { "orderable": false, "targets": [0, 7] },// 是否排序
    //{ "visible": false, "targets": [3, 5] }//是否可見(jiàn)
   ],
   "rowCallback": function (row, data, displayIndex) {//行定義
    $(row).attr("class", "text-c");
   },
   "initComplete": function (settings, json) { //表格初始化完成后調(diào)用

   },
   /****************************************表格數(shù)據(jù)加載****************************************************/
   /****************************************表格樣式控制****************************************************/
   "dom": "t<'dataTables_info'il>p",//表格布局
   "language": {//語(yǔ)言國(guó)際化
    "lengthMenu": "每頁(yè) _MENU_ 條",
    "zeroRecords": "沒(méi)有找到記錄",
    "info": "當(dāng)前顯示 _START_ 到 _END_ 條，共 _TOTAL_條",
    "infoEmpty": "無(wú)記錄",
    "paginate":
    {
     "first": "首頁(yè)",
     "previous": "前一頁(yè)",
     "next": "后一頁(yè)",
     "last": "末頁(yè)"
    }
   },
   "pagingType": "full_numbers",//分頁(yè)格式
   "processing": true,//等待加載效果
   "ordering": false,//排序功能
   /****************************************表格樣式控制****************************************************/
  });
  return table;
 }
</script>

 后端代碼:

/****************Controller后臺(tái)代碼******************/
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服務(wù)代碼************************/
 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);//分頁(yè)前必須排序，不然EF報(bào)錯(cuò)

   return userInfoIq;
  }

using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace ViewModel
{
 /// <summary>
 /// JqueryDataTable插件交互的DT格式的數(shù)據(jù)(DT參數(shù)區(qū)分大小寫(xiě))
 /// </summary>
 public class DataTable
 {
  /// <summary>
  /// 請(qǐng)求次數(shù)（前端==》后端）
  /// </summary>
  public int draw { get; set; }

  /// <summary>
  /// 總記錄數(shù)（前端《==后端）
  /// </summary>
  public int recordsTotal { get; set; }

  /// <summary>
  /// 過(guò)濾后的總記錄數(shù)（前端《==后端）
  /// </summary>
  public int recordsFiltered { get; set; }

  /// <summary>
  /// 記錄開(kāi)始索引（前端==》后端）
  /// </summary>
  public int start { get; set; }

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

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

  /// <summary>
  /// 集合分頁(yè)數(shù)據(jù)（前端《==后端）
  /// </summary>
  public IList data { get; set; } 
 }
}

這樣就搞定了。。。是不是很簡(jiǎn)單(●￣(ｴ)￣●)

╮(╯_╰)╭好的，我來(lái)解釋下。 

前臺(tái)：

首先我們的table只是給出了thead部分，那么tbody部分呢？交給DT來(lái)完成，由DT來(lái)控制。那么我們先來(lái)初始化DT，js會(huì)調(diào)用initializeTable（）方法，方法里調(diào)用$("#table1").DataTable({各種配置}）；來(lái)配置DT。至于這些配置的作用，我代碼里都做了注釋?zhuān)敿?xì)的配置解釋?zhuān)梢圆榭垂倬W(wǎng)的文檔。

配置里有一項(xiàng)很重要，就是ajax配置項(xiàng)，這里是數(shù)據(jù)源的配置項(xiàng)，數(shù)據(jù)源可以有多種，我這里選用了ajax異步請(qǐng)求數(shù)據(jù)源。

"url": "/UserInfo/Manager/Search"這個(gè)是配置了DT請(qǐng)求數(shù)據(jù)的url地址

 "type": "post"指明了以post方式發(fā)送請(qǐng)求

 "data": 

function (data) {
//添加額外的數(shù)據(jù)給服務(wù)器
 data.pageIndex = (data.start / data.length) + 1;
 data.nickname = $("#nickname").val().trim();
}

這了由于我用到了搜索的功能，所以每次請(qǐng)求數(shù)據(jù)的時(shí)候，要把搜索的條件作為附加的數(shù)據(jù)傳給服務(wù)器

最后，注意要加上"serverSide": true，因?yàn)槲覀兊臄?shù)據(jù)都是從后臺(tái)過(guò)來(lái)的，不是前臺(tái)的靜態(tài)數(shù)據(jù)，要開(kāi)啟“服務(wù)器模式”，這樣，你每次對(duì)表格的操作，都會(huì)變成一次次的請(qǐng)求發(fā)送給服務(wù)器。

 后臺(tái)：

后臺(tái)負(fù)責(zé)提供數(shù)據(jù)源，使用自定義的DataTable類(lèi)來(lái)作為格式化的數(shù)據(jù)進(jìn)行交互。當(dāng)然這里的DataTable類(lèi)不是必須的，你只要滿(mǎn)足前后數(shù)據(jù)交互的格式就可以，這里封裝成一個(gè)類(lèi)，是為了方便。

DT建議我們交互的數(shù)據(jù)格式，最起碼要包含以下幾項(xiàng)，我用匿名類(lèi)來(lái)表示(區(qū)分大小寫(xiě))：

new {

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

}

其他項(xiàng)的話，你可以根據(jù)自己的實(shí)際情況自行添加。

準(zhǔn)備好了數(shù)據(jù)之后呢，把數(shù)據(jù)Json序列化后，返回給前端，即可。

效果圖：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • zShowBox 圖片放大展示jquery版 兼容性

    zShowBox 圖片放大展示jquery版 兼容性

    zShowBox 圖片放大展示jquery版 兼容性,需要的朋友可以參考下。
    2011-09-09
  • JQuery動(dòng)畫(huà)和停止動(dòng)畫(huà)實(shí)例代碼

    JQuery動(dòng)畫(huà)和停止動(dòng)畫(huà)實(shí)例代碼

    實(shí)例中涉及到使用動(dòng)畫(huà)方法animate，動(dòng)畫(huà)停止方法Stop，其他詳情在示例代碼中都有注釋。
    2013-03-03
  • jQuery插件Tmpl的簡(jiǎn)單使用方法

    jQuery插件Tmpl的簡(jiǎn)單使用方法

    JavaScript 也可以利用模版來(lái)解決這些問(wèn)題，比如基于 jQuery 的 jquery.tmpl，現(xiàn)在已經(jīng)被接受為官方的模版插件了。詳細(xì)的 API 在 jQuery 的 Templates 里，內(nèi)置的 demo 也盡情地演示了各種用法。
    2015-04-04
  • jquery遍歷標(biāo)簽中自定義的屬性方法

    jquery遍歷標(biāo)簽中自定義的屬性方法

    下面小編就為大家?guī)?lái)一篇jquery遍歷標(biāo)簽中自定義的屬性方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-09-09
  • 與jquery serializeArray()一起使用的函數(shù)，主要來(lái)方便提交表單

    與jquery serializeArray()一起使用的函數(shù)，主要來(lái)方便提交表單

    與jquery serializeArray()一起使用的函數(shù)，主要來(lái)方便提交表單，需要的朋友可以參考下。
    2011-01-01
  • jquery動(dòng)畫(huà)1.加載指示器

    jquery動(dòng)畫(huà)1.加載指示器

    動(dòng)畫(huà)效果對(duì)于豐富網(wǎng)站的交互體驗(yàn)起到了不可或缺的作用，他可以讓你的站點(diǎn)更酷，更吸引人
    2012-08-08
  • JQuery Mobile實(shí)現(xiàn)導(dǎo)航欄和頁(yè)腳

    JQuery Mobile實(shí)現(xiàn)導(dǎo)航欄和頁(yè)腳

    導(dǎo)航欄由一組水平排列的鏈接構(gòu)成，通常位于頁(yè)眉或頁(yè)腳內(nèi)部。本文給大家介紹JQuery Mobile實(shí)現(xiàn)導(dǎo)航欄和頁(yè)腳的相關(guān)知識(shí)，需要的朋友參考下吧
    2016-03-03
  • jquery仿ps顏色拾取功能

    jquery仿ps顏色拾取功能

    本文主要介紹jquery仿ps顏色拾取功能的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
    2017-03-03
  • 設(shè)置jquery UI 控件的大小方法

    設(shè)置jquery UI 控件的大小方法

    下面小編就為大家?guī)?lái)一篇設(shè)置jquery UI 控件的大小方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-12-12
  • jQuery動(dòng)態(tài)添加與刪除tr行實(shí)例代碼

    jQuery動(dòng)態(tài)添加與刪除tr行實(shí)例代碼

    最近由于項(xiàng)目的需要，需要?jiǎng)討B(tài)的添加和刪除table中的tr，感覺(jué)用JS可以實(shí)現(xiàn)，但是在網(wǎng)上找了一下，單純的自己寫(xiě)JS，感覺(jué)太麻煩，而且也不好維護(hù)。于是想到了最近學(xué)的jQuery。這篇文章給大家用實(shí)例介紹了jQuery動(dòng)態(tài)添加與刪除tr行的方法，有需要的朋友們可以參考借鑒。
    2016-10-10

最新評(píng)論