Sharing the jquery DataTable plugin in MVC3.0

Not long ago I saw a nice jquery spreadsheet plugin on the web. It was later found that there were not many articles using the plug-in in MVC. This article describes how to use the plug-in in MVC3.0. Before introducing the plugin, let's briefly introduce the reason why the plug-in is recommended. I use J Qgrid more in the project. But it turns out that the style of jqgrid is often a headache for the art designer when making style adjustments. The DataTable plugin is a lightweight jquery plugin. When I look through the browser to the JS plug-in rander after the source code. The discovery is just a simple HTML table, very concise. So in the absence of special requirements of the use of this plug-in, developers JS script maintainability will be simplified, art style adjustment will become easier. The following describes how to use the DataTable jquery plug-in in MVC3.0.

First, the DataTable JS core script files, CSS files and pictures

Please download the latest version of the DataTable plugin here. The plugin is enclosed with a specific official demo. Readers can read them, only the core files of this plugin are presented here

1.jquery.datatables.min.js

Compressed core JS Files

2. css files provided by the official

Demo_page.css, Demo_table.css, demo_table_jui.css

CSS styles can be customized to meet customer needs.

3. picture file

Contains a images folder, please copy all the files to the specified directory of the MVC project, and take a screenshot as follows:

Second, DataTable client HTML and JS code

HTML code

<tableid= "mydatatable" class= "Display" >

<thead>

<tr>

<th> logo </th>

<th> Company Name </th>

<th> Address </th>

<th> City </th>

</tr>

</thead>

<tbody>

</tbody>

</table>

<inputtype= "button" id= "btntest" value= "back to background Ajax based on condition"/>

JS Code

<script type= "Text/javascript" >

var tbl;

$ (function () {

TBL = $ (' #myDataTable '). DataTable ({

"Bserverside": true,

"Sajaxsource": "Home/ajaxhandler",//MVC Ajax Invoke interface in the background.

' Bpaginate ': true,//whether the page is paginated.

"Bprocessing": true,//whether a message is being processed when the DataTable gets the data.

' Bfilter ': false,//whether the built-in filtering function is used.

' Blengthchange ': true,//whether the user is allowed to customize the number of display bars per page.

' Spaginationtype ': ' full_numbers ',//pagination style

"Aocolumns": [{

"Sname": "ID",

"Bsearchable": false,

"Bsortable": false,

"Fnrender": function (oobj) {return ' <a href=\ ' details/' + oobj.adata[0]+ ' \ ' >View</a> ';} Custom column Style},

{"sname": "Company_Name"},

{"Sname": "Address"},

{"sname": "TOWN"}]

});

Ajax re-load control data. (Server side)

$ ("#btnTest"). Click (function () {

var osettings= tbl.fnsettings ();

Osettings.sajaxsource= "Home/ajaxhandler2";

alert (Osettings.sajaxsource);

Tbl.fncleartable (0);

Tbl.fndraw ();

});

});

</script>

iii. MVC Service-side AJAX-related code

DataTable Ajax Response parameter class

public class Datatableparameter {///<summary>///DataTable Request Server-side number///</summary> public string Secho { get; Set; ///<summary>///Filter Text///</summary> public string Ssearch {get; set;}///<summary>///number of per-page display </summary> public int Idisplaylength {get; set;}///<summary>///paging time per page span quantity///</summary> Publ IC int Idisplaystart {get; set;}///<summary>///columns///</summary> public int Icolumns {get; set;}/ <summary>///number of rows///</summary> public int Isortingcols {get; set;}///<summary>///comma split all Column///</summary> public string Scolumns {get; set;}}

then use the MVC Modelbinder to manifest the action parameter

Public Jsonresult Ajaxhandler (datatableparameter param) {return Json (new {Secho = Param.secho, itotalrecords = x, it Otaldisplayrecords = Aadata = new List < object > {new string [] {"1", "Company Info", "Address Information", "City Info"}, N EW string [] {"1", "Company Info", "Address Information", "City Info"}, new string [] {"1", "Company Info", "Address Information", "City Info"}, new Str ing [] {1