DataTables Companion Bootstrap Style usage Summary (2) Ajax Chapter

Distance last a little time, the weekend did the best man to attend a local tyrants classmate's wedding.

The previous article is to introduce the basic usage, the basic principle is to take out all the data, and then call the $.datatables (option) method format, this method is obviously not very scientific, so the Ajax method is necessary.

First, last.

JS and CSS references are still unchanged, see the previous article.

HTML page:

@{viewbag.title = "Datatableserver";} @{//Two types of identities List<SelectListItem>Discriminatortypes = new List<SelectListItem>() {new SelectListItem () {text= "identity type", value = ""}, New SelectListItem () {Text = "student", value = "Student"} , new SelectListItem () {text= "mentor", value= "Instructor"}};}<Divclass= "hidden"ID= "Hidden_filter">@* the need to search for the condition into the hidden inside, when the table format is completed directly call $.html () assignment, eliminating the trouble in the JS splicing tag *@<Divclass= "Row"style= "margin-right:0;">@Html. DropDownList ("Distype", Discriminatortypes, new {@class = "Form-control input-small", style = "width:12 0px "}) @Html. TextBox (" name "," ", new {@class =" Form-control input-small ", style =" width:150px ", placeholder =" Please enter the name "}")<ButtonID= "Go_search"class= "Btn Btn-default">Search</Button>    </Div></Div><Divclass= "Panel Panel-default">    <Divclass= "Panel-heading">        <Divclass= "Panel-title">Ajax fetching Data asynchronously</Div>    </Div>    <Divclass= "Panel-body">        <TableID= "Table_server"class= "Table table-bordered table-striped table-hover">            <thead>                <TR>                    <th>Id</th>                    <th>Name</th>                    <th>Time of entry</th>                    <th>Identity</th>                    <th>Operation</th>                </TR>            </thead>        </Table>    </Div></Div>

The page definition on the table only needs to define THEAD.

Js:

<script type= "Text/javascript" >        $(function () {            varTableprefix = "#table_server_"; $("#table_server"). dataTable ({serverside:true,//paging, fetching data, and so on to the server .Processing:true,//whether to display "loading" when loading dataPagelength:10,//number of data bars loaded for the first timeOrdering:false,//The sort operation is done on the service side, so it can be turned off. Ajax: {//jquery-like Ajax parameters are basically available. Type: "Post",//The background specifies the way, the default get, plus the parameters for the default construction of the DataTable are long and may exceed the maximum length of the get. URL: "@Url. Action (" Getpeoples ")", DATASRC:"Data",//The default data, you can also write other, format table when you take the information insideDatafunction(d) {//D is the original data sent to the server, which is very long by default.                         varparam = {};//You can create a new parameter object because of the service-side orderingParam.start = D.start;//ordinal of StartParam.length = D.length;//of the data to be taken .                        varFormData = $ ("#filter_form"). Serializearray ();//serialize the data in a form into an arrayFormdata.foreach (function(e) {Param[e.name]=E.value;                        }); returnParam//Customize the parameters that need to be passed. },}, columns: [//corresponds to the sequence inside the thead.{data: "id",},//key corresponding to the field name and the JSON sequence returned{data: ' name ', },                    {                        //Student no hiredate .Datafunction(e) {if(e.hiredate) {//The default is/date (794851200000)/format, which needs to be displayed in month and day mode                                return NewDate (Number (E.hiredate.replace (/\d/g, ")) . tolocaledatestring (); }                            returnEmpty; }}, {data:"Discriminator",}, {data:function(e) {//This returns a list of actions for the last column                            //e is an item in the resulting JSON array that can be used to control the properties of the label.                             return' <a class= ' btn btn-default btn-xs show-detail-json ' ><i class= ' icon-edit ' ></i> Show Details </a> '; }}], InitComplete:function(setting, JSON) {//Replace the original search box after initialization is complete.                     //originally wanted to put the form tag inside the hidden_filter, because of the event binding, or take it out. $ (Tableprefix + "filter"). HTML ("<form id= ' filter_form ' >" + $ ("#hidden_filter"). HTML () + "</form>"); }, Language: {lengthmenu:' <select class= ' Form-control input-xsmall ' > ' + ' <option value= ' 5 ' >5</option> ' + ' <option value= ' ">10</option> ' + ' <option value=" >20</option> "+ ' <option value=" >30</option > ' + ' <option value= "+" >40</option> ' + ' <option value= ">50</option> ' + ' </select> Record ',//The paging size is displayed in the upper left corner. Processing: "Load in",//display when working with page dataPaginate: {//the style text content of the page. Previous: "Prev", Next:"Next Page", First:"First Page", Last:"Last Page"}, Zerorecords:"No content",//the contents of the tbody when the table tbody content is empty.                     //The following three constitute the contents of the overall lower left corner. Info: "A total of _pages_ pages, showing _start_ to _end_, filtered to get _total_ bar, the initial _max_ bar",//The information in the lower left corner is displayed, capitalized words are keywords. Infoempty: "0 Records",//filters the display to the lower-left corner when empty. Infofiltered: ""//Filter prompt After filtering (the other is the paging information display, in the above info has been set, so can not display),                }            }); //$ ("#table_server_filter Input[type=search]"). CSS ({width: "auto"});//The default search text box in the upper right corner, not to write this is beyond.         }); $ (document). On ("Submit", "#filter_form",function () {            return false;        }); $ (document). On ("Click", "#go_search",function () {            $("#table_server"). DataTable (). Draw ();//Click Search to redraw the table.         }); $ (document). On ("Click", ". Show-detail-json",function() {//Remove data from the current row 

            Alert (json.stringify ($ ("#table_server"). DataTable (). Row ($ (this). Parents ("tr")). data ());        });     </script>

The above consists of two points, one is a custom filter object in the upper right corner, to load the method in the callback function completed by table initialization, and the second is to invoke the draw method of the DataTable API object to implement the reload.

The last thing to say is that the binding event of the tag is placed on the document or other parent tag, because the element is displayed only after the DataTable method has been loaded.

DataTables Companion Bootstrap Style usage Summary (2) Ajax Chapter