Question

从Ajax响应中，从服务器返回70到80行。因此，我使用 tablesorter 插件为我的表格以分页的形式显示数据。

我试过这种方式以分页的形式显示数据。

<table id="candletable" class="table table-striped">
</table>

$('#candletable').tablesorter({
    onRenderHeader: function(index) {
        this.wrapInner('<span class="icons"></span>');
    }

});

但我看不到任何分页，请你告诉我如何为表添加分页

这就是我在这个小提琴中试图表现的东西

http://jsfiddle.net/eY8uH/1480/

在这种情况下，你能告诉我如何在我的桌子上添加分页吗？

Answer 1

提供的代码中存在一些selectors和initialization问题。

试试这个：

＆＃13;

var myjsonresponse = [{
  "name": "JAYBARMARU",
  "date_time": "2015-12-29"
}, {
  "name": "JUSTDIAL",
  "date_time": "2015-12-29"
}, {
  "name": "TITAN",
  "date_time": "2015-12-29"
}, {
  "name": "VIMALOIL",
  "date_time": "2015-12-29"
}, {
  "name": "PRAKASHSTL",
  "date_time": "2015-12-29"
}, {
  "name": "DEEPAKFERT",
  "date_time": "2015-12-29"
}, {
  "name": "SPICEMOBI",
  "date_time": "2015-12-29"
}, {
  "name": "DOLPHINOFF",
  "date_time": "2015-12-29"
}, {
  "name": "RIIL",
  "date_time": "2015-12-29"
}, {
  "name": "KESARENT",
  "date_time": "2015-12-29"
}, {
  "name": "BSLNIFTY",
  "date_time": "2015-12-29"
}, {
  "name": "BEML",
  "date_time": "2015-12-29"
}, {
  "name": "ESCORTS",
  "date_time": "2015-12-29"
}, {
  "name": "GNFC",
  "date_time": "2015-12-29"
}, {
  "name": "PATINTLOG",
  "date_time": "2015-12-29"
}, {
  "name": "JAYBARMARU",
  "date_time": "2015-12-29"
}, {
  "name": "JUSTDIAL",
  "date_time": "2015-12-29"
}, {
  "name": "TITAN",
  "date_time": "2015-12-29"
}, {
  "name": "VIMALOIL",
  "date_time": "2015-12-29"
}, {
  "name": "PRAKASHSTL",
  "date_time": "2015-12-29"
}, {
  "name": "DEEPAKFERT",
  "date_time": "2015-12-29"
}, {
  "name": "SPICEMOBI",
  "date_time": "2015-12-29"
}, {
  "name": "DOLPHINOFF",
  "date_time": "2015-12-29"
}, {
  "name": "RIIL",
  "date_time": "2015-12-29"
}, {
  "name": "KESARENT",
  "date_time": "2015-12-29"
}, {
  "name": "BSLNIFTY",
  "date_time": "2015-12-29"
}, {
  "name": "BEML",
  "date_time": "2015-12-29"
}, {
  "name": "ESCORTS",
  "date_time": "2015-12-29"
}, {
  "name": "GNFC",
  "date_time": "2015-12-29"
}, {
  "name": "PATINTLOG",
  "date_time": "2015-12-29"
}];

var html = "";
html += '<thead><th class="thheaders">Symbol</th><th class="thheaders">Date</th></thead><tbody>';
for (var e = 0; e < myjsonresponse.length; e++) {
  html += "<tr><td>" + myjsonresponse[e].name + "</td><td>" + myjsonresponse[e].date_time + "</td></tr>"
}

$("#candletable").html(html);

$('table').tablesorter({}).tablesorterPager({
  container: $(".pager"),
});

＆＃13;

/* tables */

table.tablesorter {
  font-family: arial;
  background-color: #CDCDCD;
  margin: 10px 0pt 15px;
  font-size: 8pt;
  width: 100%;
  text-align: left;
}
table.tablesorter thead tr th,
table.tablesorter tfoot tr th {
  background-color: #e6EEEE;
  border: 1px solid #FFF;
  font-size: 8pt;
  padding: 4px;
}
table.tablesorter thead tr .header {
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;
}
table.tablesorter tbody td {
  color: #3D3D3D;
  padding: 4px;
  background-color: #FFF;
  vertical-align: top;
}
table.tablesorter tbody tr.odd td {
  background-color: #F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
  background-image: url(asc.gif);
}
table.tablesorter thead tr .headerSortDown {
  background-image: url(desc.gif);
}
table.tablesorter thead tr .headerSortDown,
table.tablesorter thead tr .headerSortUp {
  background-color: #8dbdd8;
}
table .header {
  cursor: pointer;
}
table .header:after {
  content: "";
  float: right;
  margin-top: 7px;
  border-width: 0 4px 4px;
  border-style: solid;
  border-color: #000000 transparent;
  visibility: hidden;
}
table .headerSortUp,
table .headerSortDown {
  background-color: #f7f7f9;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
table .header:hover:after {
  visibility: visible;
}
table .headerSortDown:after,
table .headerSortDown:hover:after {
  visibility: visible;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}
table .headerSortUp:after {
  border-bottom: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #000000;
  visibility: visible;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}

＆＃13;

<link href="http://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="http://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>

<table id="candletable" class="tablesorter">
</table>

<div id="pager" class="pager">
  <form>
    <img src="http://tablesorter.com/addons/pager/icons/first.png" class="first" />
    <img src="http://tablesorter.com/addons/pager/icons/prev.png" class="prev" />
    <input type="text" class="pagedisplay" />
    <img src="http://tablesorter.com/addons/pager/icons/next.png" class="next" />
    <img src="http://tablesorter.com/addons/pager/icons/last.png" class="last" />
    <select class="pagesize">
      <option selected="selected" value="10">10</option>
      <option value="20">20</option>
      <option value="30">30</option>
      <option value="40">40</option>
    </select>
  </form>
</div>

＆＃13;

Table Pagintion不与tablesorter一起出现

1 个答案: