The current page of the DataTable refreshes the draw operation

Source: Internet
Author: User
Tags button type constant error code
DataTable Current Page Refresh implementation Talk is Cheap,let ' s show the code:
var table = $ (' #example '). DataTable ();
Sort by column 1 and then Re-draw
Table.draw (false);

It is simple to pass the false parameter into the draw method to implement the current page refresh. Don't ask me how I know, this problem has been stuck me for a long time, until later thought, the framework's designers certainly consider this kind of problem, certainly will also give the solution, so finally in the official document found the desired answer. I make a wipe, think of a long time problem, unexpectedly this is. Draw (false) is simply solved. Official document Reference Link: dataTable drawapi Imagine a scene when you render a table. On page 20 of table, we need to perform certain actions on a row of data in the table, such as tags. Mark this action will pop up a modal box, the operation is completed and back to the current page, ideally, the current row of data should display the most recent changes in the data. This is the most normal application scenario. If you're not using framework integration, well, you can actually take the global variable to remember the current page's request parameters and then send the request again. However, if you are using a DataTable-made paging implementation, then I tell you that you are blessed. Post the Code first

var _table = $table. DataTable ($.extend (True, {}, CONSTANT. Data_tables. Default_option, {ajax:function (data, callback, settings) {//ajax configured as function, invoke asynchronous query//encapsulation request manually
                parameter var param = usermanage.getquerycondition (data); $.ajax ({type: "GET", url: "/markmaster/listarray", Cache:fal SE,//disable cache Data:param,//pass in encapsulated parameters DataType: "JSON", SUCC Ess:function (Result) {if (Result.errorcode) {alert ("Query failed.
                            Error code: "+ Result.errorcode);
                        Return
                        } var returndata = {};
                        Returndata.draw = Data.draw;
                        Returndata.recordstotal = Result.total;
                        returndata.recordsfiltered = Result.total; Returndata.data =Result.pagedata;
                        Call the callback method provided by DataTables, representing that the data has been encapsulated and passed back to the DataTables for rendering//The data at this time needs to be ensured correctly, and the exception judgment should be processed by itself before executing this callback
                    Callback (Returndata);
                    }, Error:function (XMLHttpRequest, Textstatus, Errorthrown) {alert ("Query failed");
            }
                }); }, Columns: [{data: ' ID ', render:constant. Data_tables. RENDER. Ellipsis}, {data: "Mid", render:constant. Data_tables. RENDER. MID}, {data: ' name ', Render:constant. Data_tables. RENDER. UNAME}, {data: "tag", Render:constant. Data_tables. RENDER. TAG}, {data: "CooperAtestatus ", Render:constant. Data_tables. RENDER. cooperate}, {data: "Signstatus", Render:constan T.data_tables. RENDER. Sign}, {data: "Mark", Render:constant. Data_tables. RENDER.
                    Ellipsis}, {data:null, defaultcontent: "",
                    Orderable:false, Width: "120px"}, { Data:null, Defaultcontent: "", Orderable:false, Width: " 120px "}]," Createdrow ": function (row, data, index) {if (DATA.R
                OLE) {$ (row). addclass ("info"); }//Give the current row a column style $ (' TD ', Row). EQ (3). addclass (data.status? "Text-success":" Text-error "); Use jquery document operations instead of render cell var edit = ' <button type= ' button ' class= ' btn btn-primary btn-edit ' > Edit
                </button> ';
                var $option = $ (' <div> ' +edit+ ' </div> ');
                var $btnData = $ (' <button type= "button" class= "btn btn-small btn-primary btn-data" > Data </button> ");
                $ (' TD ', Row). EQ ( -1). Append ($option);
                $ (' TD ', Row). EQ ( -2). Append ($btnData);
            var a = "";

})). API ();
        <!--assembly Query Parameters section--getquerycondition:function (data) {var param = {}; Assemble sort parameters if (data.order && data.order.length && data.order[0]) {switch (data.order[0]
                    . column) {case 1:param.ordercolumn = "id";
                Break
                    Case 2:param.ordercolumn = "mid";
                Break
                  Case 3:  Param.ordercolumn = "name";
                Break
                    Case 4:param.ordercolumn = "tag";
                Break
                    Case 5:param.ordercolumn = "Cooperatestatus";
                Break
                    Case 6:param.ordercolumn = "Signstatus";
                Break
                    Case 7:param.ordercolumn = "Mark";
                Break
                    Default:param.orderColumn = "id";
            Break
        } Param.orderdir = Data.order[0].dir;
        }//assembly query Parameters Param.opensearch = Usermanage.opensearch;
            if (usermanage.opensearch) {Param.uid = $ ("#uid"). Val ();
            Param.nickname = $ ("#nickName"). Val ();
        Param.tag = $ ("#tag"). attr (' item ');
        }//assembly paging parameter Param.startindex = Data.start;
        Param.pagesize = Data.length; Param. draw = Data.draw;
    return param; }

Obviously, the request parameter is encapsulated in the DataTable, we are not difficult to take out, but want to be injected when the refresh is very troublesome. When I met this threshold, I was really baffled. Think of several emancipation programs have been denied themselves, until later ... Add the _table.draw (false) immediately after the execution of the operation code, and then you can implement the current page of the operation to refresh the ~ Hi-Sprint

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.