JQuery dataTable extension +ajax post,get some basic operations (i)

First of all, the ASP. NET MVC series temporarily did not find a package similar to the Web form of the DataGrid, only a jquery DataTable, the official website address http://www.datatables.net, next explain about their own in the project Some examples of extending a DataTable in the. (First,asp.net MVC has not packaging control similar the Web Form DataGrid, and now I just konw Jquery dataTable, and The website Address:http://www.datatables.net, the next, I'll list some examples that I had meet some issues in pro ject),

Directly on the View Code

<form method="Post"onsubmit="return Maintaindel ();"> <div id="Message"> 
"color:red"> @ViewBag .mes"Chooseuserid"Name="Chooseuserid"Type="Hidden"/> <divclass="Row"> <divclass="col-lg-12"> <divclass="Panel Panel-default"> <!--<divclass="panel-heading">Users</div>--> <divclass="Panel-body"> <divclass="table-responsive"> <table id="Tab" class="table table-striped table-bordered table-hover"> <thead> <tr>                                    <th>Delete</th> <th>NRIC</th>                                    <th>user id</th> <th>NAME</th>                                    <th>Email</th> <th>ContactNo.</th>                                    <th>Agency</th> <th>Designation</th> <th>SchemeRole</th>                                    @*<th>isdeleted</th>*@                                </tr> </thead> </table> </div&gt                ; </div> </div> </div> </div> <divclass="Text-center"> <input id="Adduserinfo"Type="Button" class="btn Btn-default"Value="ADD User"onclick="AddUser ();"Name="btnaction"/>&nbsp; <input id="Deluserinfo"Type="Submit" class="btn Btn-default"Value="Delete"Name="btnaction"/> </div> </form>

For jquerydatatable, we just need to write the table's head in the view, and then the Controller's method of getting a list from the database, because project is using Ef+mvc+storeprocedure, There is not much to be said about data, the following is the controller's code:

 [HttpGet]             [Myauthorize (ActionName = actioncode.maintainsuperuseradmin)] public ActionResult maintainsuperuseradmin () {        return View (); }///<summary>//Return Json Data for Jquery Table///</summary>//<para M name= "Parm" ></param>///<returns></returns> public jsonresult pagelist (datatablespar            Am parm) {int idisplaystart = Convert.ToInt32 (request.params["Idisplaystart"]);            Data size int idisplaylength = Convert.ToInt32 (request.params["idisplaylength"]);            Data total int totalcount; ienumerable<useruserinfo> user = this. Servicelocator.getservice<iuserinforoleschemeservice> (). Getuserinforoleschemeviewinfo (Common.AdminRoleId.SuperAdminId, AppID, Idisplaystart, idisplaylength, out TotalCount ).            ToList (); Return Json (New {Secho = parm.seCho, itotalrecords = totalcount, itotaldisplayrecords = totalcount, Aadata =        User}, Jsonrequestbehavior.allowget); }

An action corresponds to a view change view data from Jsonresult.

[Myauthorize (ActionName = actioncode.maintainsuperuseradmin)] This is a user rights filter is not detailed, can not be used. The main code is

PageList the  list data and returns the JSON format. Dataparam is a personal encapsulated data that can receive some jquerydatatable attributes (note that jquerydatatable comes with a paging effect)

public class Datatablesparam {public int idisplaystart {get; set;}        public int Idisplaylength {get; set;}        public int Icolumns {get; set;}        public string Ssearch {get; set;}        public bool Bescaperegex {get; set;}        public int Isortingcols {get; set;}        public int Secho {get; set;}        public int total {get; set;}        Public list<bool> bsortable {get; set;}        Public list<bool> bsearchable {get; set;}        Public list<string> ssearchcolumns {get; set;}        Public list<int> Isortcol {get; set;}        Public list<string> Ssortdir {get; set;}        Public list<bool> bescaperegexcolumns {get; set;}            Public Datatablesparam () {bsortable = new list<bool> ();            bsearchable = new list<bool> ();            Ssearchcolumns = new list<string> ();            Isortcol = new list<int> (); Ssortdir = new List<strIng> ();        Bescaperegexcolumns = new list<bool> ();            } public Datatablesparam (int icolumns) {this.icolumns = Icolumns;            bsortable = new list<bool> (icolumns);            bsearchable = new list<bool> (icolumns);            Ssearchcolumns = new list<string> (icolumns);            Isortcol = new list<int> (icolumns);            Ssortdir = new list<string> (icolumns);        Bescaperegexcolumns = new list<bool> (icolumns); }    }

Ok   Everything is ready, then the next step is how to pass the data back to the view table, here is the jquery code about this, some properties of the DataTable, we have Baidu Bar,, useful to say.

$ (document). Ready (function () {var admin = $ (' #tab '). DataTable ({"Sajaxsource": "@Url. Content (" ~/userin Forolescheme/schemepagelist ")",//"SSCROLLX": "100%", "Sscrollxinner": "100%",//"Bscroll            Collapse ": True," serverside ": true, ' bpaginate ': true, ' Blengthchange ': false, "Bsort": false, "Bfilter": false, "Olanguage": {"szerorecords": "@Messages. General . Emptydata.format () "," semptytable ":" @Messages. General.EmptyData.Format () ",}," Aocol Umndefs ": [{" Render ": function (data, type, full) {if (f Ull. IsDeleted = = True) {return full.                          UserName; } else {return ' <a href= ' + ' @Url. Content ("~/userinforolescheme /updateschemeuser ")" + "userid=" + full. UseRId + ' > ' + full.                          FullName + ' </a> ';  }}, "Targets": 3}, {"Render": function (data, type, full) {return ' <input type= "checkbox" id= "CheckUser" name= "Selectedroleid" class= "Usercheck" value= "' + ful              L.userid + '/> ';                   }, "targets": 0}, {"Render": function (data, type, full) { Return Trim (full.               Schemerole);         }, "Targets": 8},//{//"Render": function (data, type, full) {// if (full.          IsDeleted = = true) {//return "Yes";          }//else {//return ' No ';                    }//},//"targets": Ten//},], ' aocolumns ': [             {"Mdata": "Userinroleid"},       {"Mdata": "Nric"}, {"Mdata": "AdId"}, {"Mdata": "FullName"}, {"Mdata": "EmailAddress"}, {"Mdata": "Mobilealias"}, {"Mdata": "Agency  Id "}, {" Mdata ":" designation "}, {" Mdata ":" Schemerole "},//{    "Mdata": "Schemename"},]}); })

The section of the jquery code,,, note

"Mdata" when the field name must be entered in the Background list columns consistent, otherwise not get the column of data,

"Olanguage": {                "szerorecords": "@Messages. General.EmptyData.Format ()",                "semptytable": "@ Messages.General.EmptyData.Format () ",            },
Change the property to list is empty when the  jquerytable display of the errormessage;

"Aocolumndefs": is the extension definition of each column of the DataTable, such as when I click on the name of each row, link to the  update page to update all of the user's information.
CheckBox  each line automatically plus a checkbox facilitates some operations, bulk deletion, single deletion, and so on.

"Targets"  from 0  can be positioned to each column such as 0  is the first column checkbox.

"Render": function (data, type, full)   is all the data for the row, and data is the column of that row.

The following is the jquery Datatable display effect, many properties are not set, are based on customer needs,, you can refer to the official website to set up.

After adding a checkbox because it is based on the background of the data dynamic display, so the checkbox value to me a lot of trouble, the following jquery method is I feel better, the general is to use the ID value, but under the same ID We have to consider the accuracy of the value of the ID, so we use the class traversal to take a value on the checkbox.

　　　        var userid= "";        $ ('. Usercheck '). each (function () {            if (this.checked = = True) {                UserId + = $ (this). attr (' value ') + ', '            }                    } )    

To get a string type of data, it can be passed back to the background through a series of operations, to achieve the purpose of their own operation.

Some of the things I've tidied up

JQuery dataTable extension +ajax post,get some basic operations (i)