Jquery uses AJAX to obtain information from the background and display the implementation class on the table. jqueryajax

Jquery uses AJAX to obtain information from the background and display the implementation class on the table. jqueryajax

In the previous article, we introduced JQuery's ability to obtain information from the background from the backend and display it in tables and support row selection. Now, they have made some time to process it, in this way, you do not need to write code every time, which can save a lot of time. For details, see the following:

The Code is as follows:

// Obtain data and display the data table function GetTableData (tableId, ChlickEvent) {var table =$ (tableId); var url = table. data ('url'); $. ajax ({url: url, type: 'post', dataType: 'json ',}). done (function (json) {var fileds = new Array (); table. children ('thead '). children ('tr '). children ('th '). each (function (index, el) {var field = $ (this ). data ('field'); fileds [index] = field ;}); var tbody = ''; $. each (json, function (index, el) {var tr = "<tr>"; $. each (fileds, function (I, el) {if (fileds [I]) {tr + = '<td>' + formatJsonData (json [index] [fileds [I]) + '</td> ';}}); tr + = "</tr>"; tbody + = tr;}); table. children ('tbody '). append (tbody); if (ChlickEvent) {// if You Need To support row selection event table. children ('tbody '). addClass ('sel '); table. children ('tbody. sel '). children ('tr '). click (function (event) {$ (this ). siblings ('tr '). removeClass ('active'); // Delete the selected effect of other rows $ (this ). addClass ('active'); // Add the ChlickEvent ($ (this ). children ('td: eq (0 )'). text (); // Add Click Event });}}). fail (function () {alert ("Err") ;}) ;}// format JSON data, such as date function formatJsonData (jsondata) {if (jsondata = null) {return 'no data';} else if (// Date \ (\ d ++ \)/. exec (jsondata) {var date = new Date (parseInt (jsondata. replace ("/Date (",""). replace (")/", ""), 10); return date. toLocaleString ();} return jsondata ;}

It is very simple to write and has few functions, but it is enough for me to use it. Meet simple requirements.

HTML code must be in the following format. JSON data must be obtained through POST. The obtained address must be written to data-url, and the data column name must be written to data-field.

Click events are supported.

Usage:

<Table id = "RoleGroupTable" class = "table" data-url = "@ Url. action ("GetRoleGroups", "Account ") "> <thead> <tr> <th data-field =" ID "> ID </th> <th data-field =" Name "> Name </th> <th data-field = "Remark"> overview </th> </tr> </thead> <tbody> </table> <script> jQuery (document ). ready (function ($) {GetTableData ('# rolegrouptable', function (id) {alert (id)}) ;}); </script>

The above code is easy to understand. jquery uses AJAX to obtain information from the background and display the implementation class on the table.