jquery Paging plugin jquery pagination_jquery

Practical jquery Paging Effect plug-in jquery.pagination.js, based on the jquery implementation, according to the Pageselectcallback function callback call through AJAX call Dynamic Data, the current method is to generate JSON data to the JS file, the call of the data is JSO n Format data, the disadvantage is that the data is read out at once, the efficiency will be poor, plug-ins to support a number of parameters of the custom configuration function, or very good, we can according to their own ideas to improve.

Some students asked JQuery's simple paging plug-in, a colleague has written a simple [Javascript use callback function of the custom paging plug-in-style].

Share a powerful jquery paging plugin today: Jquery.pagination.

Official address: http://esimakin.github.io/twbs-pagination/

Introduction and description

This jquery plug-in for Ajax paging Plug-ins, one-time load, so paging when there is no refresh and delay, if the large amount of data is not recommended this method, because the load will be slower.

The original plugin CSS is not reasonable, the use of floating, it is not convenient to achieve the orientation of the left and right, and did not clear the float, in the Chinese version of the revision I have optimized it to support the positioning of the text-align.

The original JS file annotation for the Chinese Translation, demo page is also Chinese, the demo page JS and the original demo has some access, but the core unchanged.

How to use

Like a typical jquery plugin, this plugin is easy to use. The method is pagination, such as $ ("#page"). pagination (100);, where the 100 parameters are required to indicate the total number of items displayed, this is the simplest use and the resulting display is as follows:

It is also worth mentioning that the paging list needs to be placed within a label that has a class class of pagination, and you can use the Text-align property to control whether the page is centered or displayed right.

The callback function is typically used to load the content that corresponds to the paging display, as detailed in the demo source file.

Parameters

Use examples

For example, use the following code:

$ ("#Pagination"). Pagination (
  num_edge_entries:2,
  num_display_entries:4,
  callback: Pageselectcallback,
  items_per_page:1
});

Project Demo:

Define pagination-related parameters:

var pageSize = ten;
var allcount = 0;
var currentpage = 1;
var ajaxurl = '. /.. /service/acticehandler.ashx ';
var oper = "List";

Html:

  <table id= "sample-table-2" class= "table table-striped table-bordered table-hover" >
                 <thead>
                   < tr> 
                    <th> numbering </th>
                    <th> title </th>
                     <th> thumbnails </th> 
                         <th> Flyer </th>
               <%--     <th> Community </th>
                    <th> products </th>--%>
                    <th> start time < /th>
                    <th> End time </th>
                    <th> whether slide </th>
                    <th> operation </th>
                  </ tr>
                 </thead>
                <tbody id= "tbodylist" >
                </tbody>
              </table>
              < Div id= "pagination" class= "Row" ></div>

To get the data and call the paging function:

function GetList (pageIndex) {var searchname = $ ("#txtSearchName"). Val ();
  var Cityid = getcity ();
  var Endtime;
  var begintime;
  var communityname;
  var title; $.ajax ({type: "Post", DataType: ' json ', Url:ajaxurl, data: {pagesize:pagesize, Operate: "L Ist ", Currentpageindex:pageindex, Endtime: $ (" #txtDeadTime "). Val (), Cityid:cityid, BeginTime: $ ( "#txtStartTime"). Val (), CommunityName: $ ("#txtsqname"). Val (), Title: $ ("#txttitle"). Val ()}, Success:
        function (data, textstatus) {if (data!= null) {var model = eval (data); if (model!= null && model!= "undefined") {var data = eval (model.
          Instance); Allcount = model.
          TotalCount;
          var html = ';
          listactive = data;
            $.each (data, function (key, val) {html = html + ' <tr> '; html = html + ' <td width= ' 100px ' class= ' text-primary ' > ' + val.id + ' </tD> ';
            html = html + ' <td class= left ' > ' + val.title + ' </td> '; html = html + ' <td class= "left" ></img>&
            Lt;/td> '; html = html + ' <td class= "left" ></img>&lt 
            ;/td> ';
            html = html + ' <td class= left ' > ' + $.formatdate ("Yyyy-mm-dd hh:mm", data.begintime) + ' </td> ';
            html = html + ' <td class= left ' > ' + $.formatdate ("Yyyy-mm-dd hh:mm", data.endtime) + ' </td> '; html = html + ' <td class= ' left > ' + ' <a href= ' #modal-form ' onclick= ' sethomeindex (\ ' + val.id + ' \ ', \ ' + Val.ti Tle + '); return false ' class= ' btn btn-xs btn-success ' data-toggle= ' modal ' ><i class= ' Icon-key ' &GT;&L
            t;/i> Homepage Slide Set </a> ' + ' </td> '; 
            html = html + ' <td class= ' left ' > '; if (oper = = "List" {html = html + ' <a href= ' add.aspx? Rightid=0&id= ' + val.id + ' "class=" green "title=" edit "><i class=" Icon-edit bigger-130 "></i></a
              >  '; html = html + ' <a href= ' # ' onclick= ' deleteactive (\ ' + val.id + ' \ ', \ ' + val.title + ' \ ') ' class= ' Red ' title= ' logoff ' >
              ';
            html = html + ' <i class= ' icon-trash bigger-130 ' ></i></a> '; else if (oper = = "MSG") {html = html + ' <input type= checkbox ' onchange=\ ' Setcheckedpro
            ("' + Val.id + '", "' + Val.title + '"); return false;\ ' id= ' seelctactive_ ' + val.id + ' "value=" ' + val.title + ' "/> '; html = html + ' <a href= ' # ' onclick= ' Previewurl (\ ' http://sq.huilife.cn/index.php?g=Wap&m= Homeactivity&de<a href= "http://www.suchso.com/programmer/chengxuyuan-duanzi-bug-shangwang.html" class= " Keylink "title=" bug fix "target=" _blank ">bug</a>=1&a=show&id= ' + val.id + '"\ ' "class=" Blue "title=" View "><i class=" icon-zoom-in bigger-130 "></i></a> "; 
          html = html + ' </td></tr> ';
          });
          $ ("#tBodyList"). HTML (HTML);
              Set Paging if (currentpage = 1) {var initpagination = function () {//Create paging  $ ("#Pagination"). Pagination (Allcount, {num_edge_entries:1,//Edge page num_display_entries: 2,//Main page Prev_text: "<<", Next_text: ">>", Callback:pagesel
            Ectcallback, Items_per_page:pagesize/per page 1 items});
            }();
            currentpage = 100;
          if (allcount = 0) $ (' #divNumInfo '). HTML ("0-0 articles total 0"); } else {alert ("Failed to load data!") ");
        Return }}, Complete:function (XMLHttpRequest, Textstatus) {}, Error:function (e) {alert ("Load data error Miss! ");
    Return}
  }); }

Example two:

Jquery Pagination Plug-in Code:

<div id= "Page2" class= "m-pagination" ></div>
<script type= "Text/javascript" >
//Request format: .../ getpagedata?query=test&pageindex=0&pagesize=10
//Return Data: {"Data": [1,2,3,4,5,6,7,8,9,10], "Total": 800}
$ ("#page2"). Page ({
  remote: {
    URL: '/getpagedata ',//Request address
    params: {query: "Test"},    //Custom request parameters
    beforesend:function (XMLHttpRequest) {/
    /...},
    success:function (result, PageIndex) {
      // The callback function//result the data
      returned for the request, rendering the data
    },
    complete:function (XMLHttpRequest, Textstatu) {
      //...
    }
    Pageindexname: ' PageIndex ',   //Request parameters, current page, index starting from 0
    pagesizename: ' pageSize ',    //Request parameters, number
    per page Totalname: ' Total '       //Specify the field name of the aggregate amount of data to return data
  }
};
</script>

This is the full description of the jquery pagination of the jquery paging plugin, which I hope you will enjoy.