Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use ASP.NET MVC and Bootstrap to quickly build background dataTable data list in personal blog

2025-01-21 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

How to use ASP.NET MVC and Bootstrap to quickly build a background dataTable data list in a personal blog, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

JQuery dataTables plug-in is an excellent table plug-in, which is good news for background engineers! It provides sorting for data tables, browser paging, server paging, query, formatting and other functions. The dataTables official website also provides a large number of demos and detailed documents for explanation, which are described in detail here for convenience.

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

Introduce on the page:

HTML code: just write the header

The category to which the numbered title belongs, pageviews, comments, likes, status operation.

Client jQuery:

$('# archives-table') .dataTable ({"oLanguage": {/ / internationalized "sProcessing": "

Try to load the data. "," sLengthMenu ":" display _ MENU_ results per page "," sZeroRecords ":" No matching results "," sInfo ":" Total _ PAGES_ page, showing _ START_ to _ END_. After filtering, you get _ TOTAL_. " Initial _ MAX_ "," infoEmpty ":" 0 records ", / / the display in the lower left corner when the filter is empty" sInfoEmpty ":" No data "," sInfoFiltered ":" (retrieved from _ MAX_ data) ", / / screening prompt in the lower left corner after filtering "sZeroRecords": "No data retrieved", / / "sSearch": 'search'}, / / "bServerSide": false, / / the first scenario: the server takes out all the data at once, and the client handles the data completely. This is the false "bServerSide": true, / / the second scenario: the server handles the paged data, the client presents it, and it is true. But at this point, the aoColumns needs to be changed. Replace 'sName'' with mDataProp, and the custom column should also have the corresponding data "sServerMethod": "GET", "sAjaxSource": "/ Admin/AdminArchives/GetArchivesJson", / / ajax Url address "bProcessing": true, "bPaginate": true, "sPaginationType": "full_numbers", "bJQueryUI": true, / / the parameter passed from the client to the server 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''+ data +'' }, {"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 = "released" If (data = "0") value = "disabled"; return value;}}, {/ / Custom column: enable / disable "mDataProp": "null", "sWidth": "6%", "bSearchable": false, "bStorable": false, "mRender": function (data, type, row) {var actionstr = 'hair cloth'; if (row.Status = "1") actionstr = 'disabled'; return actionstr }, {/ / Custom column: real deletes "mDataProp": "null", "sWidth": "6%", "bSearchable": false, "bStorable": false, "mRender": function (data, type, row) {return';}}, {/ / Custom column: edit "mDataProp": "null", "sWidth": "6%", "bSearchable": false, "bStorable": false, "mRender": function (data, type, row) {return'' }}], "aoColumnDefs": [{/ / error report: DataTables warning: Requested unknown parameter'1' from the data source for row 0max / add this definition and there will be no mistake. SDefaultContent:', aTargets: ['_ all']}]})

Two Application scenarios of Jquery.DataTables plug-in

Scenario 1: the server takes out all the data at once, and the client handles the data completely. At this time "bServerSide": false

Server code:

Public JsonResult GetArchivesJson (jqDataTableParameter tableParam) {# region 1.0 scenario 1 / 1. Get all the articles / / List DataSource = articleService.GetDataListBy (a = > true, a = > a.Id); / 2. Construct aaData//var data = DataSource.Select (a = > new object [] {/ / a.Id + "(" + a.SubTime.ToString () + ")", / / (categoryService.GetDataListBy (c = > c.Id==a.CategoryId) [0]). Name,// a.ViewCount commentService.GetDataListBy (c = > c.CmtArtId==a.Id) .Count, / / a.DiggMagineling / a.Status==1? "normal": "Delete" / /}); / 3. Returns that json,aaData is an array with strings in the array / / return Json (new// {/ / sEcho = 1 iTotalRecords / iTotalRecords = data.Count (), / / aaData = data//}, JsonRequestBehavior.AllowGet); # endregion} public JsonResult GetArchivesJson (jqDataTableParameter tableParam)

Scenario 2: the server processes the paged data and the client presents it, which is called true

Server code:

Public JsonResult GetArchivesJson (jqDataTableParameter tableParam) {# region 2.0scenario 2 / / the client needs "bServerSide": true, bind the field with mDataProp, and get the field (. Attribute) / / 0.0 all data List DataSource = articleService.GetDataListBy (a = > true); / / DataSource = DataSource.OrderByDescending (a = > a.SubTime). ToList (); / / 1.0 first get the parameter string echo = tableParam.sEcho; / / submitted by datatable for the client's own verification int pageSize = tableParam.iDisplayStart;// the sequence number of the first piece of data on the page to be requested int pageSize = tableParam.iDisplayLength = =-1? DataSource.Count: tableParam.iDisplayLength;// capacity per page (=-1 means all data is fetched) string search = tableParam.sSearch / / 2.0 query data if (! String.IsNullOrEmpty (search)) {var data = DataSource.Where (a = > a.Title.Contains (search) | | a.Keywords.Contains (search) | | a.Contents.Contains (search)) .Skip (dataStart) .Take (pageSize) .Select (a = > new {Id = a.ID title = a.Title + "(" + a.SubTime.ToString () + "), CategoryName = a.Category.Name) ViewCount = a.ViewCountCommentCount = commentService.GetDataListBy (c = > c.CmtArtId = = a.Id) .Count, Digg = a.DiggMagneStatus = a.Status}) .ToList () / / 3.0 construct the data json object needed by datatable... inside the aaData should be a two-dimensional array: that is, an array [[",", "], []] return Json (new {sEcho = echo,iTotalRecords = DataSource.Count (), iTotalDisplayRecords = DataSource.Count (), aaData = data}, JsonRequestBehavior.AllowGet)) } else {var data = DataSource.Skip (dataStart) .take (pageSize) .Select (a = > new {Id = a.ID title = a.Title + "(" + a.SubTime.ToString () + ")", CategoryName = a.Category.Name.ViewCount = a.ViewCountCommentCountCommentCount = commentService.GetDataListBy (c = > c.CmtArtId = = a.Id) .Count, Digg = a.Digg.status = a.Status}). ToList () / / 3.0 construct the data json object needed by datatable... inside the aaData should be a two-dimensional array: that 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 sub-packaged in jqDataTableParameter.cs:

/ on the server side, the operation information of the current client / jquery $('selector'). Datatable () plug-in parameter model/// public class jqDataTableParameter {/ 1.0 DataTable is used to generate information / public string sEcho {get; set;} / 2.0 paging start index / public int iDisplayStart {get; set can be obtained by the following request parameters / public int iDisplayLength {get; set;} / 4.0search fields / public string sSearch {get; set;} / 5.0columns / public int iColumns {get; set;} / number of 6.0sort / public int iSortingCols {get; set } / 7.0Comma split all columns / public string sColumns {get; set;}} public class jqDataTableParameter

Background effect display:

These are the instructions for using the datatable plug-in.

This is the answer to the question about how to use ASP.NET MVC and Bootstrap to quickly build a background dataTable data list in a personal blog. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report