DataTable Ajax Paging + DELETE

Source: Internet
Author: User

This frame jumped into the pit a lot of times, also is I am relatively stupid to do a long time and accumulated experience ...
 $ (document). Ready (function () {$ ("#sample"). DataTable ({//internationalisation.                    For more info refer to http://datatables.net/manual/i18n language: {"aria": { "SortAscending": ": This column in ascending order", "sortdescending": ": This column in descending order"}, "Emptyta Ble ":" The data in the table is empty "," info ":" Currently displays the items _start_ to _end_, total _total_ items. "," Infoempty ":" No Record Found "," infofiltered ":" (Filtered by _max_ results) "," Infopostfix ":" "," Infothousands ":", "," Lengthmenu ":" _menu_ per page "," Loadingrecords ":" Loaded.                    .. "," Processing ":" In Process ... "," paginate ": {" first ":" Home ", "Previous": "Previous Page", "Next": "Next Page", "Last": "End",},/        /"Search": "Searching:",//"url": "", "zerorecords": "No match result"    }, Order: [],//cancels the default sort query, otherwise the check box will appear with a small arrow blengthchange:false,//prohibit the use of the search box autowidth:false,/            /Disable AutoFit column width stripeclasses:["odd", "even"],//for odd and even row style, compatible with non-CSS pseudo-class searching:false,//disable native Search ordermulti:false,//enable multi-column sort renderer: "Bootstrap",//Render style: Bootstrap and Jquery-ui pagingtype: "Simple_number  S ",///Pagination style: Simple,simple_numbers,full,full_numbers ajax:function (data, callback) {var param =                {}; Param.limit = data.length;//shows how many Param.start = data.start;//start record ordinal//console.log (param.li                MIT);                 Param.draw = 1; $.ajax ({type: "POST", url: "/ajax/lock/list",//cache:false,/                        /disable Cache data:JSON.stringify (param),//incoming assembly parameter queryparams:function (params) {                   var xsrf = $ ("Input[name = ' _xsrf ']")     if (xsrf! = undefined) {params._xsrf = Product_ver[0].value;                        } var limit = $ ("select[name= ' Table-record_length ')");                            if (limit! = undefined) {limit = (Limit[0] && limit[0].value) | | 20;                        Params.length = limit;                       } return params}, Datasrc:function (response) {                    return response.data;                                               }, DataType: "JSON", success:function (Result) {                        SetTimeout only for test delay effect setTimeout (function () {//Package return Data                        var returndata = {}; Returndata.draw = data.draw;//Here directly returns the draw counter, which should be returned by the background returndata.recordstotal = Result.recordstota l;//Return Data fullDepartment record returndata.recordsfiltered = result.recordstotal;//background does not implement filtering function, each query is considered as full results Returndata.data = result.data;//returned data list//Call DataTables provides callback method that represents data encapsulated                        Complete and return to the DataTables for rendering//At this time the data need to ensure that the correct, abnormal judgment should be done before this callback to handle the callback (Returndata);                    }, 200);            }}), processing:true,//hide load prompt, self-processing serverside:true,//enable server-side paging columns:[{"Data": "lock_id", "searchable": false, "orderable": true}, {"Data": "Name", "Search Able ": false," orderable ": false}, {" Data ":" Cat_eye "," Render ": function (data) {switch (data)                        {case True:return ' has ';                   Case False:return ' no '; }}}, {"Data": "Type"," Render ": function (data) {switch (data) {case 0:retu                        RN ' F-a ';                        Case 1:return ' f-b '; Default:return ' F-c '}}, {"Data": "Mac", "Sear               Chable ": false," orderable ": false}, {" Data ":" Province "," searchable ": false," orderable ": false},                            {"Data": "Alarm", "Render": function (data) {switch (data) {case 0:                        return ' normal ';                   Case 1:return ' not normal ';                        }}}, {"Data": "Online", "Render": function (data) {switch (data) {                        Case True:return ' online ';                   Case False:return ' not online ';            }   }}, {"Data": "corp_id", "Render": function (data) {switch (data) {                        Case 0:return ' secure heart ';                   Case 1:return ' National Sea '; }}}, {"Data": "Product_ver", "searchable": false, "orderable": false}, {"Data": " Firmware_ver "," searchable ": false," orderable ": false}, {" Data ":" master_id "}, {" Data ":" Has_ap "," Render ": function (data) {switch (data) {case 0:retu                        RN ' have ';                   Case 1:return ' no ';                    }}}, {"Data": "Descr", "searchable": false, "orderable": false}, {  "Data": null, "ClassName": "Center", "defaultcontent": ' <button type= "button" Id= "Editrow" data-toggle= "modal" class= "btn btn-outline btn-circle btn-sm Purple" ><i class= "fa fa-edit" ></i></button> <button Id= "Delrow" class= "btn btn-outline btn-circle Dark btn-sm Black" ><i class= "fa fa-trash-o" ></i></         Button> '}],}); Table Data Delete $ (' #sample '). On (' Click ', ' Button#delrow ', function (even) {even.preventdefault;//method prevents the default line from occurring             (For example, when you click the Submit button to block the submission of the form). if (Confirm ("OK" to delete this information?             ") = = False) {return; }else{
Gets the value of the current object, var, data = $ ("#sample"). DataTable (). Row ($ (this). Parents (' tr ')). data (); $.ajax ({url: '/ajax/lock/delete ', type: ' POST ', DataType: ' JSON ') , Data:JSON.stringify ({lock_id:data["lock_id"}),
Does success refer to a table in the background database? If it is, first enclose the relevant data in the Success table in the list, and then return the list to the JSON data format string back to the foreground. If you're using jquery's ajax approach, be sure to specify the data acceptance format as JSON when you accept it in the foreground, otherwise you get a JSON string, not a JSON object Success:function (data) { if (data.success = = null) {alert (' Delete succeeded! '); Start = $ ("#sample"). DataTable (). Fnsettings (). _idisplaystart;//Displays the data total = $ ("#sample") starting from the first few lines. DataTable (). Fnsettings (). Fnrecordsdisplay ();//Window.location.reload (); if ((total-start) = = 1) {if (Start > 0) {$ ("#sa Mple "). DataTable (). Fnpagechange (' previous ', true);//has returned to the previous page
. Note $ ("#sorting-advanced"). DataTable (). Fnpagechange (' previous '); No, it must be refreshed, otherwise the Idisplaystart displayed on the page will be obtained from the cookie, or the Idisplaystart} before it is deleted. }}}, Error:function () {Console.log (data); Alert (' Server not responding, please contact Administrator! '); } }) } }); });

  

DataTable Ajax Paging + DELETE

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.