jquery displays data in table Form, enabling data statistics, paging, and dynamic additions, search

Source: Https://datatables.net/examples/index

1, the necessary files: DataTables js files and CSS files, download address: https://datatables.net/download/because it is dependent on jquery, you also need to download the jquery library.
2, since the form of table display, then on the HTML page we need to first define a well-formed table label. Must have thead and tbody tags. As shown below,

<table id= "table_id" class= "display" >
    <thead>
        <tr>
            <th>column 1</th>
            <th>column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            < Td>row 1 Data 1</td>
            <td>row 1 data 2</td>
        </tr>
        <tr>
            <td> Row 2 Data 1</td>
            <td>row 2 data 2</td>
        </tr>
    </tbody>
</table >

3, the above mentioned JS files and CSS files included in the page. The path needs to be reconfigured according to the specific situation.

<!--DataTables CSS--
<link rel= "stylesheet" type= "Text/css" href= "/datatables-1.10.4/media/css/ Jquery.dataTables.css ">
  
<!--jQuery--
<script type=" text/javascript "charset=" UTF8 "src="/ Datatables-1.10.4/media/js/jquery.js "></script>
  
<!--DataTables--
<script type=" text/ JavaScript "charset=" UTF8 "src="/datatables-1.10.4/media/js/jquery.datatables.js "></script>

4, and then directly in JavaScript directly apply

$ (document). Ready (function () {
    $ (' #table_id '). DataTable ();
} );

The steps are very simple, and then the DataTables is introduced into a specific instance.

Premise: The address information in the session is displayed in the table, and can be added dynamically.

<link rel= "stylesheet" type= "Text/css" href= "Css/table/jquery.datatables.css" > <link rel= "stylesheet" type=
"Text/css" href= "Css/test.css" > <script type= "text/javascript" src= "Js/jquery-1.11.1.js" ></script> <script type= "Text/javascript" src= "js/table/jquery.datatables.js" ></script> <script type= "text/ JavaScript > $ (document). Ready (function () {    var t= $ (' #addressTable ').
DataTable ();
    var counter = 1;
    $ ("#addRow"). Click (function () {        $ ("#wrap"). FadeIn (300);         //set The center alignment padding + border         v
Ar popmargtop = ($ ("#wrap"). Height () + 24)/2;

        var popmargleft = ($ ("#wrap"). Width () + 24)/2;         $ ("#wrap"). CSS ({             ') Margin-top ':-popmargtop,              ' margin-left ':-popmargleft         

});         //Add The mask to Body         $ (' body '). Append (' The ' &
Lt;div id= "Mask" ></div> ");

        $ (' #mask '). FadeIn (300);
        return false;
    });          $ (' A.close, #mask,. Continue '). On (' click ', Function () {         $ (' #mask, #wrap '). FadeOut (), function () {          
 $ (' #mask '). Remove ();
        });
        return false;
    });          $ ("#saveAddress"). Click (function () {        var
Name = $ (". Name"). Val ();         var province = $ (". Province"). VAl ();
        var city = $ (". City"). Val ();
        var area = $ (". Area"). Val ();
        var details = $ (". Details"). Val ();
        var zipcode = $ (". ZipCode"). Val ();
        var telephone = $ (". Telephone"). Val ();
        var defaultaddress = $ (". Defaultaddress"). Val ();
        var flag= "true";
        $ (". Name"). Parent (). Next (). Text ("");
        $ (". Province"). Parent (). Next (). Text ("");
        $ (". Details"). Parent (). Next (). Text ("");
        $ (". ZipCode"). Parent (). Next (). Text ("");
        $ (". Telephone"). Parent (). Next (). Text ("");                  if (name = = "" | | Name = = UNDefined) {            $ (". Name"). Parent (). Next (). Text ("Name cannot be empty"). CSS ({                  ' font-size ': ' 12px ',     & nbsp;            ' color ': ' Red '          & nbsp
 });
            flag= "false";         }         if (province = = NULL | | province = = 0 | | cit y = = null) {            $ (". Province"). Parent (). Next (). Text ("Please select Province/municipality" ). css ({                 ' font-size ': ' 12px ',                  ' color ': ' Red '         &
nbsp;   });             flag= "fAlse ";         } else if (city = 0) {            $ (" . Province "). Parent (). Next (). Text (" Select city/Region "). css ({                  ' font-size ': ' 12px ',                  ' Color '
: ' Red '             });
            flag= "false";         } else {            if (city! = 0 &amp ;& city = null && area = = 0) {                $ ( ". Province"). Parent (). Next (). Text ("Select Region"). css ({                      ' font-size ': ' 12px ',              & nbsp       ' color ': ' Red '                 });
                flag= "false";             }         }          if (Details = = "" | | Details = = undefined) {            $ (". Details"). Parent (). Next (). Text ("
The detailed address cannot be empty "). CSS ({                 ' font-size ': ' 12px ',                  ' color ': ' Red '      & nbsp
     });
            flag= "false";         }         if (zipcode = = "" | | ZipCode = = undefined) {            $ (". ZipCode"). Parent (). Next (). Text ("Zip cannot be empty"). CSS ({                 ' Font-size ': ' 12px ',                  ' color ': ' Red '  & nbsp
         });
            flag= "false";         }         if (telephone = = "" | | Telephone = = undefined) {            $ (". Telephone"). Parent (). Next (). Text ("Contact phone cannot be empty"). CSS ({                 ' font-size ': ' 12px ',                  ' color ': ' Red '     &
nbsp;       });
            flag= "false";         } else {           if (IsNaN (telephone)) {                 $ (". Telephone"). Parent (). Next (). Text ("Please enter contact information correctly"). CSS ({                      ' font-size ': ' 12px ',          & nbsp           ' color ': ' Red '             &
nbsp;   });
                flag= "false";             }         }          if (flag== "true")             {$.post ("
Addressservlet ",                 {" name ": Name,                  "province":p rovince,                   ' City ': City,                   ' area ': area,                   "Details":d etails,                   "ZipCode": ZipCode,                   "Telephone": Telephone,                   "defaultaddress":d efaultaddress                 },function (returneddata,status) {                     var firstcolumn= "< Input Type= ' Radio ' name= ' addressradio ' checked= ' checked ' > ';                     
var address=null;                     
var lastcolumn=null;                     if (defaultaddress==0)                          {                         lastcolumn= "<span class= ' linkspan ' ><a href= ' # ' class= ' updateaddress ' style= ' display:none ' > Modify </a>&nbsp;<a href= ' # ' class= ' setdefaultaddress ' style
= ' Display:none ' > Set default address </a></span> ';                         }                      else                          {                         lastcolumn= "<span class= ' linkspan ' ><a href= ' # ' class= ' updateaddress ' style= ' display:none ' > Modify </a>
</span> ";                          }                      if (Null!=area)                          {                        address=province+ ', ' +city+ ', ' +
Area+ ', ' +details+ ', ' +zipcode;                          }                      else                         {                         address=province+ ', ' +province+ ', ' +area+ ', ' +details
+ ', ' +zipcode;                          }                      t.row.add ([                                 Firstcolumn,                                  Address,                                 name,                                   Telephone,                                   Lastcolumn                   &nBsp
        ]). Draw ();                      $ (' #mask, #wrap '). FadeOut (), function () {            
            $ (' #mask '). Remove ();
                    });
                });
            }     });          $ (". Defaultaddress. Payradio"). Click (function () {     
   if ($ (this). attr ("checked") = = "Checked")             {
            $ (this). Removeattr ("checked");       
     $ (this). attr ("value", "0");             }else if ($ (this). attr ("checked") ==undefined)             {            $ (this). attr (
"Checked", "checked");
            $ (this). attr ("Value", "1");
            }     }); ...... (omit some code) ... <div> <table id= "addresstable" class= "displaytable" > <thead> <tr> <th width = "5%" ></th> <th width= "55%" ></th> <th width= "10%" ></th> <th width= "10%" ></  th> <th width= "15%" ></th> </tr> </thead> <c:set var= "i" value= "0"/> <c:foreach Var= "Info" items= "${infolist}" > <c:set var= "defaultaddress" value= "${info.defaultaddress}"/> <c:set va R= "I" Value= "${i+1}"/> <c: If test= "${i==1}" > <tbody> <tr> <td> <input type= "Radio" name= "Addressradio" checked= "Checked" > </td> <td>${info.address.province},${info.address.city},${info.address.area },${info.address.details},${info.address.zipcode}</td> <td>${info.personName}</td> <td&gt ;${info.telephone}</td> <td class= "Orderlink" ><span class= "Linkspan" ><a href= "#" class= "Updateaddress" > Modify </a>  <c:if test= "${defaultaddress==false}" > <a href= "#" class= "Setdefau Ltaddress "> Set as Default address </a> </c:if></span></td> </tr> </c:if> <c:
						If test= "${i!=1}" > <tr> <td><input type= "Radio" name= "Addressradio" ></td> <td> ${info.address.province},${info.address.city},${info.address.area},${info.address.details},${
						Info.address.zipcode}</td><td>${info.personName}</td> <td>${info.telephone}</td> <td class= "Orderlink" >&lt Span class= "Linkspan" ><a href= "#" class= "updateaddress" > Modify </a>  <c:if test= "${defaultaddr Ess==false} "> <a href=" # "class=" Setdefaultaddress "> Set as Default address </a> </c:if></span>& lt;/td> </tr> </c:if> </c:forEach> </tbody> </table> </div>

The results appear as follows:

Implement keyword Search

Problems: After the refresh may appear the repeated accumulation of information, there is no direct implementation of the ability to insert information into the first line, you need to add additional keywords, according to DESC\ASC implementation of the function.

Another nice table plugin: http://www.jtable.org/