Using ASP.net mvc and bootstrap to quickly build a personal blog after the table DataTable data List _ Practical skills

The JQuery DataTables plugin is an excellent form plugin and is the Gospel of the backstage engineer! It provides features for sorting data tables, browser paging, server paging, querying, formatting, and more. DataTables Official website also provides a large number of demonstrations and detailed documentation to explain, in order to facilitate the use, here for detailed description.

Go to official website: https://www.datatables.net/Download the latest version is v1.10.12.

Introduce on page:

<link rel= "stylesheet" href= "~/content_admin/css/bootstrap.min.css"/> <link rel= "stylesheet" href= "~/"
Content_admin/css/bootstrap-responsive.min.css "/>
<script type=" Text/javascript "src=" ~/Content_Admin/ Js/jquery.min.js "></script>
<script type=" Text/javascript "src=" ~/content_admin/js/ Bootstrap.min.js "></script>

HTML code: Write on <thead></thead> headers

<div class= "Widget-content nopadding" > <table id= "archives-table"
table class= Data-table mydatatable ">
<thead>
<tr>
<th> number </th>
<th> title </ th>
<th> Categories </th>
<th> views </th>
<th> Review amount </th>
<th> Point quantity </th>
<th> status </th>
<th> operation </th>
<th> Operation </th>
<th> operations </th>
</tr>
</thead>
<tbody></tbody>
</table >

Client jquery:

$ (' #archives-table '). DataTable ({"Olanguage": {//Internationalization "sprocessing": " Efforts to load Data ... "," Slengthmenu ":" Show  _menu_   results per page "," Szerorecords ":" No Match Results "," sinfo ":" _pages_ page, show the first _ Start_ to _end_, after filtering get _total_, initial _max_ strip "," Infoempty ":" 0 Records ",////filter to display" Sinfoempty "in the lower left corner of the empty time:" No Data "," sinfofiltered ": "(retrieved from _max_ data)",//Bottom left corner filter prompt, "szerorecords": "No Data retrieved",//"Ssearch": ' <span class= ' label label-success ' >   Search  </span> '},//' bserverside ': false,//The first scenario: The server takes out all the data at once and the client processes the data entirely. False "Bserverside" at this time: True,//second scenario: The server side processes the paging data, the client renders, and this is true. But at this time aocolumns to change, will be ' sname ' replaced by Mdataprop, while the custom column also has the corresponding data "Sservermethod": "Get", " Sajaxsource ":"/admin/adminarchives/getarchivesjson ",//ajax URL address" bprocessing ": True," bpaginate ": true," Spaginationtype ": Full_numbers", "Bjqueryui": true,///client to server parameter is Ssearch ' Bfilter ': false,//' bsearch ': true, ' Blengthchange ': True, ' alengthmenu ': [[5, 15, 20,-1], [5, 15, 20, all]//change PEr page values here], ' idisplaylength ': 7,//10 records per page ' Bautowidth ': true, ' scrollx ': true, ' aocolumns ': [{' Swidth ': ' 5 % "," Mdataprop ":" Id "}, {" Swidth ":" 40% "," Mdataprop ":" Title "," Mrender ": Function (data, type, row) {return ' <a hr ef= "/archives/index/' + row".
Id + ' > ' + data + ' </a> '; }, {"Swidth": "10%", "Mdataprop": "CategoryName"}, {"Swidth": "6%", "Mdataprop": "Viewcount", "bstorable": true}, {  "Swidth": "6%", "Mdataprop": "Commentcount", "bstorable": true}, {"Swidth": "6%", "Mdataprop": "Digg", "bstorable": True }, {"Swidth": "6%", "Mdataprop": "Status", "Mrender": Function (data, type, row) {var value = "Published"; if (data = = "0") v
Alue = "Disabled";
return value; }, {//Custom column: Enable/disable ' Mdataprop ': ' null ', ' swidth ': ' 6% ', ' bsearchable ': false, ' bstorable ': false, ' Mrender ': function ( Data, type, row) {var actionstr = ' <a id= ' publicarticle ' class= ' publicaction ' target-id= ' + row.
Id + ' "href=" # "> Release </a>"; if (row. Status = = "1") Actionstr = 'A id= "delarticle" class= "delaction" target-id= "' + row.
Id + ' "href=" # "> Disable </a>";
return actionstr; }, {//Custom column: Real delete "Mdataprop": "null", "Swidth": "6%", "bsearchable": false, "bstorable": false, "Mrender": function (data, type, row) {return ' <a id= ' realdelarticle ' class= ' tip ' target-id= ' ' + row.
Id + ' "href=" # "><i class=" Icon-remove "></i></a>";  }, {//Custom column: Edit "mdataprop": "null", "Swidth": "6%", "bsearchable": false, "bstorable": false, "Mrender": function (data, Type, row) {return ' <a class= ' tip ' href= '/admin/adminarchives/editarchive/' + row.
Id + ' "><i class=" Icon-pencil "></i></a>"; }], "Aocolumndefs": [{//Error: DataTables warning:requested unknown parameter ' 1 ' from the data source for row 0//plus this paragraph
There is no error in the definition. Sdefaultcontent: ", atargets: [' _all ']}]}";

Two application scenarios for Jquery.datatables Plug-ins

Scenario One: The server takes out all the data at once, and the data is processed entirely by the client. At this point "bserverside": false,

Service-Side code:

Public Jsonresult Getarchivesjson (jqdatatableparameter tableparam)
{
#region 1 Scene one
////1. Get all articles
/ /list<article> DataSource = Articleservice.getdatalistby (a => true, a => a.id);
2. Construct Aadata
//var data = Datasource.select (a => new object[]{
//a.ID,
//A.title+ "(" +a.subtime.tostring () + ")",
//(Categoryservice.getdatalistby (C=>c.id==a.categoryid) [0]). Name,
//A.viewcount,
//Commentservice.getdatalistby (c=>c.cmtartid==a.id). Count,
//A.digg,
//a.status==1? Normal ": Delete"
//});
3. Returns whether the Json,aadata is an array in which the array is still a string array
//return Json (new
//{
//Secho = 1,
//Itotalrecords = Datasource.count,
//itotaldisplayrecords = data. Count (),
//aadata = Data
//}, Jsonrequestbehavior.allowget); 
#endregion
} public
Jsonresult Getarchivesjson (jqdatatableparameter tableparam)

Scenario Two: server-side processing pagination data, client rendering, this is true,

Service-Side code:

Public Jsonresult Getarchivesjson (Jqdatatableparameter tableparam) {#region 2 scene two//client needs "Bserverside": true, with Mdatap
ROP bound field, Obj.aData.Id gets the field (. property)//0.0 All data list<article> DataSource = Articleservice.getdatalistby (a => true); DataSource = datasource.orderbydescending (a => a.subtime).
ToList (); 1 first get the parameters that the DataTable submits. String echo = Tableparam.secho; For the client's own checksum int datastart = tableparam.idisplaystart;//The ordinal of the first data on the page to be requested int pageSize = Tableparam.idisplaylength = = 1?
datasource.count:tableparam.idisplaylength;//per page capacity (=-1 representation of all data) string search = Tableparam.ssearch; 2.0 query data based on parameters (starting serial number, per page capacity, parameter parameters) if (! String.IsNullOrEmpty (search) {var data = Datasource.where (a => a.title.contains (search) | | a.keywords.contains (
Search) | | A.contents.contains (search)). Skip<article> (Datastart). Take (pageSize). Select (a => new {Id = a.id, Title = A.title + "(" + a.subtime.tostring () + ")", CategoryName = A.category.name, VIEWC Ount = a.viewcount, Commentcount = CommentservIce. Getdatalistby (c => c.cmtartid = = a.id). Count, Digg = A.digg, Status = A.status}).
ToList ();
3.0 The data Json object required to construct the DataTable ... aadata inside should be a two-dimensional array: that is, the inside is an array [["," "," ""],[],[],[]] return Json (new {Secho = Echo, Itotalrecords = Datasource.count (), itotaldisplayrecords = Datasource.count (), aadata = data},
Jsonrequestbehavior.allowget); else {var data = datasource.skip<article> (Datastart). Take (pageSize). Select (a => new {Id = a.id, Title = A.title + "(" + a.subtime.tostring () + ")", CategoryName = A.category.name, VIEWC Ount = a.viewcount, Commentcount = Commentservice.getdatalistby (c => c.cmtartid = = a.id). Count, Digg = A.digg, Status = A.status}).
ToList ();
3.0 The data Json object required to construct the DataTable ... aadata inside should be a two-dimensional array: that is, the inside is an array [["," "," ""],[],[],[]] return Json (new {Secho = Echo, Itotalrecords = Datasource.count (), itotaldisplayrecords = Datasource.count (), aadata = data},
Jsonrequestbehavior.allowget); #endregion} public Jsonresult Getarchivesjson (Jqdatatableparameter TableparaM 

The parameters sent by DataTables are divided into JqDataTableParameter.cs:

<summary>
///on the server side, you can obtain the operation information of the current client via the following request parameters
///jquery $ (' selector '). DataTable () plug-in parameter model
// /</summary> public
class Jqdatatableparameter
{
///<summary>
///1.0 DataTable used to generate information
///</summary> Public 
string Secho {get; set;}
<summary>
///2.0 Paging start index
///</summary> public
int Idisplaystart {get; set;}
<summary>
///3.0 per-page display
///</summary> public
int Idisplaylength {get; set;}
<summary>
///4.0 search field
///</summary> public
string Ssearch {get; set;}
<summary>
///5.0 columns
///</summary> public
int Icolumns {get; set;}
<summary>
Number of///6.0 row sequences
///</summary> public
int Isortingcols {get; set;}
<summary>
///7.0 comma split all columns
///</summary> public
string Scolumns {get; set;}
}
public class Jqdatatableparameter

Background effect display:

The above is the use of the DataTable plug-in instructions.

The above is a small series to introduce the use of ASP.net mvc and Bootstrap quickly set up a personal blog after the table DataTable data list, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!