DataTables configuration and use, datatables Configuration

DataTables configuration and use, datatables Configuration

If the Bootstrap framework is used for WEB Background Development, do not miss this table artifact.

Official Address: https://datatables.net/

What? English is not good, it does not matter we have a Chinese http://datatables.club/

However, I suggest reading English, because although the access speed is relatively slow, it is always possible. Let's just talk about it. Let's take a small example.

1. First reference the script address. The best version is consistent.

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

2. Configure Localization

"OLanguage": {"sProcessing": "processing... "," sLengthMenu ":" _ MENU _ items on each page "," sZeroRecords ":" No matching results "," sInfo ": "The _ START _ to _ END _ items are currently displayed, TOTAL _ items. "," SInfoEmpty ":" 0th to 0 items are displayed, 0 items in total "," sInfoFiltered ":" (filtered by _ MAX _ items) "," sInfoPostFix ": "", "sSearch": "Search:", "sUrl": "", "sEmptyTable": "empty table data", "sLoadingRecords": "loading... "," sInfoThousands ":", "," oPaginate ": {" sFirst ":" Homepage "," sPrevious ":" Previous Page "," sNext ":" Next page ", "sLast": "last page", "sJump": "jump"}, "oAria": {"sSortAscending": ": sort this column in ascending order", "sSortDescending ":": sort this column in descending order "}},

I would like to say that the local configuration above has found that its name is quite strange, and there is a lower-case o, s and so on the front side, but the official website does not name it like this now, of course, this does not affect our use of it. Below is a relatively new configuration parameter.

Language: {"decimal": "", "emptyTable": "No data available in table", "info": "items from _ START _ to _ END _ are currently displayed, TOTAL _ items. "," InfoEmpty ":" currently 0 to 0th items are displayed, 0 items in total "," infoFiltered ":" (filtered by _ MAX _ items) "," infoPostFix ": "", "thousands": ",", "lengthMenu": "_ MENU _ items per page", "loadingRecords": "loading... "," processing ":" processing... "," search ":" search: "," zeroRecords ":" No matching results "," paginate ": {" first ":" Homepage "," previous ": "last page", "next": "next page", "last": "last page"}, "aria": {"sortAscending": ": sort this column in ascending order ", "sortDescending": ": sort this column in descending order "}}

From the perspective of development, it is very troublesome to initialize this configuration every time, so we can encapsulate it into a file and reference it on the next page. Next we will create a dataTables name. defaults. the js File Code is as follows:

$. Extend ($. fn. dataTable. defaults, {language: {"decimal": "", "emptyTable": "No data available in table", "info ": "The _ START _ to _ END _ items are currently displayed, TOTAL _ items. "," InfoEmpty ":" currently 0 to 0th items are displayed, 0 items in total "," infoFiltered ":" (filtered by _ MAX _ items) "," infoPostFix ": "", "thousands": ",", "lengthMenu": "_ MENU _ items per page", "loadingRecords": "loading... "," processing ":" processing... "," search ":" search: "," zeroRecords ":" No matching results "," paginate ": {" first ":" Homepage "," previous ": "last page", "next": "next page", "last": "last page"}, "aria": {"sortAscending": ": sort this column in ascending order ", "sortDescending": ": sort this column in descending order "}}});

Now our language localization configuration is over. If you have a single file, do not forget to reference it !!

3. Next let's look at other configurations.

• The page code is simple.

<table id="table" class="table table-condensed  table-hover"> 
</table>

• Basic Configuration

Var table = $ ("# table "). dataTable ({lengthMenu: [20, 40, 60,-1], [20, 40, 60, "All"], sort: false, pageLength: 20, pagingType: "full_numbers", paging: true, searching: false, // shield the dom of the datatales query box: 'rt <"row" <"col-md-4" I> <"col-md-8" p> ', processing: true, serverSide: true, columns: [{title: "No ", data: "Uid", visible: true}, {title: "Account", data: "Account" },{ title: "PassWord", data: "PassWord "}, {title: "status", data: "StatusName"}, {title: "time", data: "CreateTime"},], ajax: {url: '/User/getuserlist', type: 'post '}});

If you don't talk about other configurations, just talk about dom. This configuration item is the location of the search operations, data information, buttons, and how many items are displayed on each page.

• L-Length changing controls that change the number of data entries displayed on each page
• F-Filtering input instant search box Control
• T-The Table itself
• I-Information table related Information controls
• P-Pagination paging Control
• R-pRocessing loading pending display information
• <>-Div elements indicates a div element.<div><div>
• <"# Id">-div with an id specifies the id div Element<div id='id'><div>
• <"Class">-div with a class specifies the div element of the style name.<div class='class'><div>
• <"# Id. class">-div with an id and class specifies the div element of the id and style.<div id='id' class='class'><div>

I just want to display what elements and where they are arranged by myself. I prefer to define the filter items above, so the information on the table is hidden by me.

The following shows the back-end code, which is relatively simple and has no abstraction or the like.

 

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));}

Here we also want to talk about the points of attention,

Request. form. get ("draw") Request count counter. After each request is sent to the server, it is returned in the original format. You do not need to process it. Remember to return it. Otherwise, you do not know the error. Request. form. get ("start") indicates the starting position of the first data entry, starting from 0. The page number * page number = start. If you are using a mysql database, limit start is convenient, length. form. get ("length") number of entries per page

 

The parameters accepted by dataTables must follow the following to be recognized.

{    "draw": 2,    "recordsTotal": 24,    "recordsFiltered": 24,    "data": [        {            "Uid": 1,            "Account": "aaaaaa@hotmail.com",            "PassWord": "123456",        },        {            "Uid":2,            "Account": "bbbbb@hotmail.com",            "PassWord": "456123",        }    ],    "error": ""}

In this way, the binding is successful. If you do not understand other parameters, you can go to Baidu or visit the official website.