DataTables 配置和使用

来源:http://www.cnblogs.com/fangwei0505/archive/2017/01/10/6270156.html
-Advertisement-
Play Games

WEB後臺開發，如果用的是Bootstrap框架，那這個表格神器你一定不要錯過。 官方地址：https://datatables.net/ What？英文不好，沒關係咱有中文的 http://datatables.club/ 不過我還是建議看英文的，因為比較全面雖然訪問的速度慢點，終歸能進的去。閑話 ...


WEB後臺開發，如果用的是Bootstrap框架，那這個表格神器你一定不要錯過。

官方地址：https://datatables.net/

What？英文不好，沒關係咱有中文的 http://datatables.club/ 

不過我還是建議看英文的，因為比較全面雖然訪問的速度慢點，終歸能進的去。閑話不過說，先來個小例子吧。

1.先引用一下腳本地址，最好版本是一致的

<link rel="stylesheet" href="dataTables.bootstrap.min.css">
<script src="jquery.dataTables.min.js"></script> 
<script src="dataTables.bootstrap.min.js"></script>

2.配置一下本地化

"oLanguage": {
    "sProcessing": "處理中...",
    "sLengthMenu": "每頁 _MENU_ 項",
    "sZeroRecords": "沒有匹配結果",
    "sInfo": "當前顯示第 _START_ 至 _END_ 項，共 _TOTAL_ 項。",
    "sInfoEmpty": "當前顯示第 0 至 0 項，共 0 項",
    "sInfoFiltered": "(由 _MAX_ 項結果過濾)",
    "sInfoPostFix": "",
    "sSearch": "搜索:",
    "sUrl": "",
    "sEmptyTable": "表中數據為空",
    "sLoadingRecords": "載入中...",
    "sInfoThousands": ",",
    "oPaginate": {
        "sFirst": "首頁",
        "sPrevious": "上頁",
        "sNext": "下頁",
        "sLast": "末頁",
        "sJump": "跳轉"
    },
    "oAria": {
        "sSortAscending": ": 以升序排列此列",
        "sSortDescending": ": 以降序排列此列"
    }
},

 　　寫到這裡要說一句，上邊這段本地化配置，有沒有發現它的命名挺奇怪的，前邊都有一個小寫的o、s之類的，但是現在官網並不這樣命名了，當然這並不影響我們使用它，下邊是比較新的配置參數。

language: {
    "decimal": "",
    "emptyTable": "No data available in table",
    "info": "當前顯示第 _START_ 至 _END_ 項，共 _TOTAL_ 項。",
    "infoEmpty": "當前顯示第 0 至 0 項，共 0 項",
    "infoFiltered": "(由 _MAX_ 項結果過濾)",
    "infoPostFix": "",
    "thousands": ",",
    "lengthMenu": "每頁 _MENU_ 項",
    "loadingRecords": "載入中...",
    "processing": "處理中...",
    "search": "搜索:",
    "zeroRecords": "沒有匹配結果",
    "paginate": {
        "first": "首頁",
        "previous": "上頁",
        "next": "下頁",
        "last": "末頁"
    },
    "aria": {
        "sortAscending": ": 以升序排列此列",
        "sortDescending": ": 以降序排列此列"
    }
}

　　如果從開發角度來講的話，每次都初始化這個配置，挺麻煩的，所以我們可以封裝成文件，下個頁面引用一下就可以了，接下來創建一個名字為 dataTables.defaults.js 的文件代碼如下

$.extend($.fn.dataTable.defaults, {
    language: {
        "decimal": "",
        "emptyTable": "No data available in table",
        "info": "當前顯示第 _START_ 至 _END_ 項，共 _TOTAL_ 項。",
        "infoEmpty": "當前顯示第 0 至 0 項，共 0 項",
        "infoFiltered": "(由 _MAX_ 項結果過濾)",
        "infoPostFix": "",
        "thousands": ",",
        "lengthMenu": "每頁 _MENU_ 項",
        "loadingRecords": "載入中...",
        "processing": "處理中...",
        "search": "搜索:",
        "zeroRecords": "沒有匹配結果",
        "paginate": {
            "first": "首頁",
            "previous": "上頁",
            "next": "下頁",
            "last": "末頁"
        },
        "aria": {
            "sortAscending": ": 以升序排列此列",
            "sortDescending": ": 以降序排列此列"
        }
    }
});

　　我現在我們的語言本地化配置就算結束了，如果單獨的文件一定別忘記引用!!

3.下麵我們看下別的配置

  • 頁面代碼很簡單
<table id="table" class="table table-condensed  table-hover"> 
</table>
  • 基礎配置
var table = $("#table").DataTable({
    lengthMenu: [[20, 40, 60, -1], [20, 40, 60, "All"]],
    sort: false,
    pageLength: 20,
    pagingType: "full_numbers",
    paging: true,
    searching: false, //屏蔽datatales的查詢框
    dom: 'rt<"row"<"col-md-4" i><"col-md-8"p>>',
    processing: true,
    serverSide: true,
    columns: [
        { title: "編號", data: "Uid", visible: true },
        { title: "賬號", data: "Account" },
        { title: "密碼", data: "PassWord" },
        { title: "狀態", data: "StatusName" },
        { title: "時間", data: "CreateTime" },
    ],
    ajax: {
        url: '/User/GetUserList',
        type: 'POST'
    }
});

其他配置就不說了，就只說說dom吧，這個配置項是操作 搜索、數據信息、按鈕、每頁顯示多少條這幾個選項的的位置

  • l - Length changing 改變每頁顯示多少條數據的控制項
  • f - Filtering input 即時搜索框控制項
  • t - The Table 表格本身
  • i - Information 表格相關信息控制項
  • p - Pagination 分頁控制項
  • r - pRocessing 載入等待顯示信息
  • < > - div elements 代表一個div元素 <div><div>
  • <"#id" > - div with an id 指定了id的div元素 <div id='id'><div>
  • <"class" > - div with a class 指定了樣式名的div元素 <div class='class'><div>
  • <"#id.class" > - div with an id and class 指定了id和樣式的div元素 <div id='id' class='class'><div>

要顯示什麼元素，顯示在什麼位置自己安排就好了，我比較習慣上邊的篩選項自己定義，所以表格上的信息就被我隱藏掉了.

下麵展示一下後端的代碼，比較簡單沒有做什麼抽象之類的

 

public ActionResult GetUserList()
{
    UserInfo query = new UserInfo
    {
        PageStart = Convert.ToInt32(Request.Form.Get("start")),
        PageEnd = Convert.ToInt32(Request.Form.Get("length"))
    };

    var data = userInfoService.FindUserInfoList(query).ToList();
    int count = userInfoService.FindUserInfoListCount(query);
    DataTableModel<UserInfo> model = new DataTableModel<UserInfo>()
    {
        draw = Convert.ToInt32(Request.Form.Get("draw")),
        recordsTotal = count,
        recordsFiltered = count,
        data = data,
        error = string.Empty
    };
    var iso = new Newtonsoft.Json.Converters.IsoDateTimeConverter();
    iso.DateTimeFormat = "yyyy-MM-dd HH:mm:ss";
    object obj = new object();
    return Content(Newtonsoft.Json.JsonConvert.SerializeObject(model, iso));
}

這裡還要說下註意的地方，

Request.Form.Get("draw") 請求次數計數器，每次發送給伺服器後又原封返回，不用做什麼處理，切記一定要返回，不然錯哪你都不知道。
Request.Form.Get("start") 第一條數據的起始位置，從0開始， 頁碼*頁數=start  如果你用的是mysql資料庫，就方便了 limit start,length  就可以了
Request.Form.Get("length") 每頁顯示的條數

 

dataTables 接受的參數必須按照下麵這樣，它才會認識

{
    "draw": 2,
    "recordsTotal": 24,
    "recordsFiltered": 24,
    "data": [
        {
            "Uid": 1,
            "Account": "[email protected]",
            "PassWord": "123456",
        },
        {
            "Uid":2,
            "Account": "[email protected]",
            "PassWord": "456123",
        }
    ],
    "error": ""
}

這樣綁定就成功了，其他的參數有不太明白的可以自行百度，或者去官網看一看。




您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • C#開發學習——常用的正則表達式
    對於想學習正則表達式的童鞋，一些基礎的語法啥的，可以參考 http://www.cnblogs.com/China3S/archive/2013/11/30/3451971.html 下邊是一些我們常用的正則表達式。自己寫的一些正則表達式，可以先線上測評一下。 一、校驗數字的表達式 1 數字：^[0 ...
  • 實例構造器與值類型和引用類型
    構造器名與類名一致。 1。實例構造器與類（引用類型） 構造器是允許將類型的實力初始化為良好狀態的一種特殊方法。 創建一個引用類型的實例時（類），首先為實例的數據欄位分配記憶體，然後初始化對象的附加欄位（類型對象指針和同步索引快），最後調用類型的實例構造器來設置對象的初始狀態。 new一個類所發生的事： ...
  • visual studio 2010 無法連接到ASP.NET Development Server
    在點擊運行項目時，生成成功。但是頁面沒有彈出來，彈出個提示框，無法連接到 ASP.NET Development Server. 網上我看到說關閉掉防火牆，可是再關掉防火牆後還是不行。但是其他的項目又能跑起來，所以估計是埠號被占用了。 最後的解決方案是： 項目右鍵屬性，在屬性視窗，將使用動態埠號 ...
  • 實現BUG自動檢測 - ASP.NET Core依賴註入
    我個人比較懶，能自動做的事絕不手動做，最近在用ASP.NET Core寫一個項目，過程中會積累一些方便的工具類或框架，分享出來歡迎大家點評。 如果以後有時間的話，我打算寫一個系列的【實現BUG自動檢測】，本文將是第一篇。 如果你使用過ASP.NET Core那麼對依賴註入一定不陌生。 使用流程... ...
  • 分享一個C#自定義事件的實際應用
    在C#.NET的開發中，事件是經常接觸到的概念，比如為按鈕添加點擊事件，並寫入點擊按鈕觸發事件要運行的代碼。不管是ASP.NET還是WinForm等各種形式的應用程式，最經常是為系統生成的事件寫具體代碼。如果要自定義事件呢?有的朋友對於自定義事件感覺比較難理解。最近在開發HoverTreeTop項目 ...
  • C#練習
    C#簡單程式練習 說明：學習之餘溫習幾道經典基礎知識題，將其記錄下來，以供初學者參考。 1,題目：求出0-1000中能被7整除的數，並計算輸出每五個數的和： 運行截圖： 題目2：編寫一個類，其中包含一個排序的方法 Sort(), 當傳入的是一串整數，就按照從小到大的順序輸出，如果傳入的是一個字元串， ...
  • .NET 基礎 一步步 一幕幕[面向對象之堆、棧、引用類型、值類型]
    堆、棧、引用類型、值類型 記憶體分為堆和棧（PS：還有一種是靜態存儲區域 [記憶體分為這三種]），值類型的數據存儲在棧中，引用類型的數據存儲在堆中。 堆、棧： 堆和棧的區別： 棧是編譯期間就分配好的記憶體空間，因此你的代碼中必須就棧的大小有明確的定義；局部值類型變數、值類型參數等都在棧記憶體中。 堆是程式運 ...
  • Vue.js 學習示例
    本篇和大家分享的是學習Vuejs的總結和調用webapi的一個小示例；快到年底了爭取和大家多分享點東西，希望能對各位有所幫助；本章內容希望大家喜歡，也希望各位多多掃碼支持和推薦謝謝： » Vuejs - 學習大雜燴 » WebApi + Vue.js 示例 下麵一步一個腳印的來分享： » Vuejs ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類