关于jquery.pagination.js分页的问题,老报错是怎么回事
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于jquery.pagination.js分页的问题,老报错是怎么回事相关的知识,希望对你有一定的参考价值。
$(function ()
function pageselectCallback(page_id, jq)
//alert(page_id);
$("#fenye").pagination(<%=itemcount%>,
callback: pageselectCallback,//PageCallback() 为翻页调用次函数。
prev_text: " 上一页",
next_text: "下一页 ",
items_per_page: <%=pageCount %>, //每页的数据个数
num_display_entries: 3, //两侧首尾分页条目数
current_page: <%=itempage%>, //当前页码
num_edge_entries: 2, //连续分页主体部分分页条目数
link_to:"?serverpage=__id__&"
);
);
运行的时候总是提示对象不支持pagination属性或方法
我也是啊,但个页面可以,放到mvc index中就是不行。
------------------------------------------------------------------------
我刚才出来效果了。
我用的MVC4.
一、先在BundleConfig.cs中 引入css 和 jpaginate
//分页脚本
bundles.Add(new ScriptBundle("~/bundles/jPaginate").Include("~/Content/jPaginate/jquery.paginate.js"));
//分页样式
bundles.Add(new StyleBundle("~/bundles/jPaginateCss").Include("~/Content/jPaginate/css/style.css"));
二、 在再layout中 加入:
@Styles.Render("~/bundles/jPaginateCss")@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jPaginate")
注意吧jquery的提前了
三、 然后再 Index 中
@ViewBag.Title = "Index";
<h2>Index</h2>
<div class="demo">
<h1>Demo 4</h1>
<div id="demo1">
</div>
</div>
<script>
$(function ()
$("#demo1").paginate();
);
</script>
这是默认的风格,然后自己去调吧 刚试出来的
已经引入了
看下路径是否正确,把这样的变量先写死一个值试试,确认pagination方法 是传入两个参数吗?
jquery分页
1 <script src="../../js/jquery-3.2.1.min.js"></script> 2 <script src="../../js/jquery.pagination.js"></script> 3 4 <script> 5 $(function () { 6 getPage(); 7 }); 8 // 分页 9 function getPage() { 10 var user = JSON.parse(sessionStorage.getItem(‘user‘)); 11 var token = user.token; 12 $.ajax({ 13 url: PROJECTLIST, 14 type: ‘get‘, 15 data: { 16 page: 0, 17 pageSize: 100 18 }, 19 dataType: ‘json‘, 20 beforeSend: function (request) { 21 request.setRequestHeader("token", token); 22 }, 23 success: function (data) { 24 if (data.code==401){ 25 alert("请重新登录"); 26 top.location.href="../login/login.html"; 27 return false; 28 } 29 30 let pn = 1; //当前页数 31 let count = data.data.totalElements; //总条数 32 let size = 5; //每页显示的个数 33 let total = Math.ceil(count/size); //总共多少页 34 // 根据总页数添加li 索引 35 for (var i =0;i<total;i++){ 36 $(‘.table_mess tbody‘).append("<tr>"+(i+1)+"</tr>") 37 } 38 gotoPage(pn); 39 40 // 点击数字 41 $(".paginatin-wrapper").click(function(event) { 42 pn=$(".M-box1 .active").text(); 43 gotoPage(pn); 44 }); 45 } 46 }); 47 } 48 // 根据页数展示数据 49 function gotoPage(pn) { 50 getData(pn); 51 } 52 // 获取数据列表 53 function getData(pn) { 54 var user = JSON.parse(sessionStorage.getItem(‘user‘)); 55 var token = user.token; 56 var item; 57 $.ajax({ 58 url: PROJECTLIST, 59 type: ‘get‘, 60 data: { 61 page: 0, 62 pageSize: 100 63 }, 64 dataType: ‘json‘, 65 beforeSend: function(request) { 66 request.setRequestHeader("token", token); 67 }, 68 success: function (data) { 69 if (data.code == 200){ 70 var count = data.data.totalElements;// 总条数 71 var size = 5; // 每页显示条数 72 var total =Math.ceil( count / size ); //总页数 73 var yu = count%size; // 得到总数除每页显示个数的余数 74 var linum = size; 75 var startPage = size*(pn-1); 76 var endPage = startPage+size-1; 77 78 var $tbody = $(".table_mess tbody"); 79 $tbody.empty(); 80 if (pn==total) { //如果是最后一页就添加余下个数的li 81 linum=yu; 82 } 83 for (var i = 0; i < linum; i++) { 84 $tbody.append(‘<tr class="li-tag"></tr>‘); 85 } 86 var items = data.data.data; 87 if (items.length>0){ 88 if (total==1){ 89 for (var i=0;i<count;i++){ 90 var pic = items[i].picture.split(","); 91 var nav = ` 92 <td>${items[i].name}</td> 93 <td> 94 <span> 95 <i class="mess_lab">所属小区:</i> 96 <i class="name">${items[i].ssxq}</i> 97 </span> 98 <span>.........</span> 99 </td> 100 <td> 101 <span> 102 <i class="mess_lab">总面积:</i> 103 <i class="name">${items[i].zmj}</i> 104 </span> 105 <span>.........</span> 106 </td> 107 <td><img src="${pic[0]}" ></td> 108 <td> 109 <a onclick="lookmore(${i})" href="javascript: void(0)">查看详情</a> 110 <a href="#">删除</a> 111 </td> 112 ` 113 114 $(".li-tag").eq(i).append(nav); 115 } 116 } else { 117 for (var j = startPage,k=0;j<endPage,k<size;j++,k++){ 118 if (j==count){break;} 119 var pic = items[j].picture.split(","); 120 var nav = ` 121 <td>${items[j].name}</td> 122 <td> 123 <span> 124 <i class="mess_lab">所属小区:</i> 125 <i class="name">${items[j].ssxq}</i> 126 </span> 127 128 129 <span>.........</span> 130 </td> 131 <td> 132 <span> 133 <i class="mess_lab">总面积:</i> 134 <i class="name">${items[j].zmj}</i> 135 </span> 136 <span>.........</span> 137 </td> 138 <td><img src="${pic[0]}" ></td> 139 <td> 140 <a onclick="lookmore(${j})" href="javascript: void(0)">查看详情</a> 141 <a href="#">删除</a> 142 </td> 143 ` 144 $(".li-tag").eq(k).append(nav); 145 } 146 } 147 $(‘.M-box1‘).pagination({ 148 pageIndex: 2, 149 totalData: count, 150 showData: 5, 151 current: pn, 152 coping: true 153 }); 154 }else { 155 $(‘.table_mess tbody‘).html("暂无数据") 156 } 157 }else if (data.code==401){ 158 alert("请重新登录"); 159 top.location.href="../login/login.html"; 160 return false; 161 } 162 } 163 }); 164 } 165 </script>
以上是关于关于jquery.pagination.js分页的问题,老报错是怎么回事的主要内容,如果未能解决你的问题,请参考以下文章
jQuery 分页插件(jQuery.pagination.js)ajax 实现分页