jquery Pagination.js 实现分页程序

最新推荐文章于 2024-08-10 08:26:26 发布

原创最新推荐文章于 2024-08-10 08:26:26 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery 分页

javascript 专栏收录该内容

12 篇文章

订阅专栏

在项目中为了实现表格数据的分页功能，采用Jquery.pagination.js插件。本文简要介绍如何引入js文件及编写javascript代码来实现分页效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为项目需要，在表格显示的情况中需要使用分页功能，找了很多js的插件，最后找到Jquery.pagination.js，简单记录下使用方法，以备以后使用：

一、引入js文件，引入jquery.js和jquery.pagination.js文件

这个就不赘述了，使用任何jquery插件都是先引入jquery.js然后引入jquery.pagination.js文件。

二、javascript代码：

 function getPage(curPage){
            $.ajax({
                url:'api.php',
                type:'POST',
                dataType: 'json',
                data:{curPage:curPage},
                success:function(data){
                   fill_table(data);
                },
                error:function(data){
                    console.info(data);
                }
            });
        }
         function fill_table(json_data){
		if(json_data.data.length < 20){
			var html = '';
                         var newAndUpdate = 0;
			$.each(json_data.data,function(i,content){
				html += ""//处理渲染数据;
			})
			$("#expirednum_list").html(html);
			$(".pagination").html('');
		}else{
                    console.info(json_data);
		function pageselectCallback(page_index, jq){
                // Get number of elements per pagionation page from form
               /* var items_per_page = 20;
                var max_elem = Math.min((page_index+1) * items_per_page, json_data.data.length);
               
                var newAndUpdate = 0;
        */           
                $("#list").html('');
               var newcontent = '';
               var json_data = null;
              $.ajax({
                url:'api.php',
                type:'POST',
                dataType: 'json',
                async:false,
                data:{curPage:page_index},
                success:function(data){
                   json_data = data;
                },
                error:function(data){
                    console.info(data);
                }
            });
                // Iterate through a selection of the content and build an HTML string
                $.each(json_data.data,function(i,n)
                {
                   newcontent += ""//处理渲染数据
;
                });
                console.info(json_data);
                // Replace old content with new content
                $("#list").html(newcontent);
                // Prevent click eventpropagation
                return false;
            }
			
                function getOptionsFromForm(){
                var opt = {callback: pageselectCallback};
				opt['items_per_page'] = 20;
				opt['num_display_entries'] = 4;
				opt['num_edge_entries'] = 2;
				opt['prev_text'] = '上一页';
				opt['next_text'] = '下一页';
                return opt;
             }
              var optInit = getOptionsFromForm();
              $(".pagination").pagination(json_data.length, optInit);
	}
		
	}   //默认调用获取第一页
使用getPage(1)

三、后端处理

后端只要处理传过来的curPage的当前页就可以了。。。查询时使用 limit $offset,$pageSize 就可以得到翻页的数据内容了。