Share the use of the jquery DataTable plugin in MVC3.0

I saw a very nice jquery table plugin on the web shortly before. Later, there are not many articles that use the plugin in MVC. This article describes how to use the plugin in MVC3.0. Before introducing the plugin, let's briefly introduce the reason why the plugin is recommended. I use Jqgrid more in the project. However, it is found that jqgrid styles often give the artist a headache when making style adjustments. The DataTable plugin is a lightweight jquery plugin. When I through the browser to view the JS plugin rander after the source code. Discovery is just a simple HTML table, very concise. In the absence of special requirements to use the plugin, the developer JS script maintainability will be simplified, the art of style adjustment will be easier! The following describes how to use the DataTable jquery plugin in MVC3.0.

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

Please download the latest version of the DataTable plugin here. The plugin is accompanied by a specific official demo. Readers can read their own, here only the core file of this plugin

1.jquery.datatables.min.js

Compressed Core JS file

2. Officially provided CSS files

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 the file to the specified directory of the MVC project as follows:

　　Second, DataTable client HTML and JS code

HTML code:

<table id="mydatatable"class="display">
    <thead>
        <tr>
            <th>
                Identity
            </th>
            <th>
                Company Name
            </th>
            <th>
                Address
            </th>
            <th>
                City
            </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<input type="button" id="btntest" value= " re-respond to background Ajax based on conditions " />

JS Generation:

<script type="Text/javascript">
var tbl;
$ (function () {
TBL = $ ('#myDataTable'). dataTable ({
                "Bserverside":true,
                "Sajaxsource":"Home/ajaxhandler",//MVC backend Ajax call interface. 
                'bpaginate':true,//whether pagination is paginated. 
                "bprocessing":true,//whether the message is being processed when the DataTable gets the data. 
                'Bfilter':false,//whether to use the built-in filtering function. 
                'Blengthchange':true,//whether to allow users 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>';
}//Customizing the style of a column
},
{"SName":"company_name"},
{"SName":"ADDRESS"},
{"SName":" Town"}
]
});

            //Ajax re-load the control data. (Server side)
$("#btnTest"). Click (function () {
var osettings = tbl.fnsettings ();
Osettings.sajaxsource ="Home/ajaxhandler2";
alert (Osettings.sajaxsource);
Tbl.fncleartable (0);
Tbl.fndraw ();

});
});
</script>

　　Third, the MVC service-side AJAX-related code

DataTable Ajax Response Parameter class:

  Public classDatatableparameter
{
        ///<summary>
        ///DataTable Request Server-side count
        ///</summary>
         Public stringSecho {Get;Set; }

        ///<summary>
        ///Filter Text
        ///</summary>
         Public stringSsearch {Get;Set; }

        ///<summary>
        ///number of displays per page
        ///</summary>
         Public intIdisplaylength {Get;Set; }

        ///<summary>
        ///number of spans per page when paging
        ///</summary>
         Public intIdisplaystart {Get;Set; }

        ///<summary>
        ///Number of columns
        ///</summary>
         Public intIcolumns {Get;Set; }

        ///<summary>
        ///Number of row series
        ///</summary>
         Public intIsortingcols {Get;Set; }

        ///<summary>
        ///comma-Split all columns
        ///</summary>
         Public stringScolumns {Get;Set; }
}

Then, using MVC's Modelbinder, the action parameter is manifested:

 PublicJsonresult Ajaxhandler (datatableparameter param)
{
    returnJson (New
{
Secho = Param.secho,
Itotalrecords = -,
Itotaldisplayrecords = -,
Aadata =Newlist<Object> {
                                 New string[] {"1","Company Information","Address Information","City Information"},
                                 New string[] {"1","Company Information","Address Information","City Information"},
                                 New string[] {"1","Company Information","Address Information","City Information"},
                                 New string[] {"1","Company Information","Address Information","City Information"},
                                 New string[] {"1","Company Information","Address Information","City Information"},
                                 New string[] {"1","Company Information","Address Information","City Information"},
                                 New string[] {"1","Company Information","Address Information","City Information"},
                                 New string[] {"1","Company Information","Address Information","City Information"},
                                 New string[] {"1","Company Information","Address Information","City Information"},
                                 New string[]{"1","Company Information","Address Information","City Information"}
}
}, Jsonrequestbehavior.allowget);
}

　　Iv. procedures

Generate the following HTML code:

<table id="mydatatable" class="Display">
<thead>
<tr>
<th style="width:239px;" class="sorting_disabled">
Identity
</th>
<th style="width:366px;" class="sorting">
Company Name
</th>
<th style="width:239px;" class="sorting">

Address
</th>
<th style="width:239px;" class="sorting">
City
</th>
</tr>
</thead>
<tbody><trclass="Odd"><tdclass="sorting_1"><a href="DETAILS/1">View</a></td><td> Company Information </td><td> address information </td><td> City information </td></ Tr><trclass="even"><tdclass="sorting_1"><a href="DETAILS/1">View</a></td><td> Company Information </td><td> address information </td><td> City information </td></ Tr><trclass="Odd"><tdclass="sorting_1"><a href="DETAILS/1">View</a></td><td> Company Information </td><td> address information </td><td> City information </td></ Tr><trclass="even"><tdclass="sorting_1"><a href="DETAILS/1">View</a></td><td> Company Information </td><td> address information </td><td> City information </td></ Tr><trclass="Odd"><tdclass="sorting_1"><a href="DETAILS/1">View</a></td><td> Company Information </td><td> address information </td><td> City information </td></ Tr><trclass="even"><tdclass="sorting_1"><a href="DETAILS/1">View</a></td><td> Company Information </td><td> address information </td><td> City information </td></ Tr><trclass="Odd"><tdclass="sorting_1"><a href="DETAILS/1">View</a></td><td> Company Information </td><td> address information </td><td> City information </td></ Tr><trclass="even"><tdclass="sorting_1"><a href="DETAILS/1">View</a></td><td> Company Information </td><td> address information </td><td> City information </td></ Tr><trclass="Odd"><tdclass="sorting_1"><a href="DETAILS/1">View</a></td><td> Company Information </td><td> address information </td><td> City information </td></ Tr><trclass="even"><tdclass="sorting_1"><a href="DETAILS/1">View</a></td><td> Company Information </td><td> address information </td><td> City information </td></ Tr></tbody></table>