Table sorter plugin not firing for dynamically added rows
HI,
I have a html table, in which the rows are created dynamically. There is no "thead" in table.
I am trying to use the table sorter plugin for the pagination alone. However, I am not sure what is missed, as clicking on items in pager do not work. Also the pagintation itself is not getting done.
Below is the code used:
- <script type="text/javascript" src="/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src="/Scripts/test1.js"></script>
<script type="text/javascript" src="/Scripts/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.tablesorter.pager.js"></script>
- <link rel="stylesheet" type="text/css" href="/CSS/jquery.tablesorter.pager.css" />
<table id="tbl1">
<thead>
</thead>
</table>
- <br />
<div id="pager" class="pager">
- <img src="/Images/first.png" class="first" />
- <img src="/Images/prev.png" class="prev" />
- <img src="/Images/next.png" class="next" />
- <img src="/Images/last.png" class="last" />
<select class="pagesize">
<option selected="selected" value="1">1</option> // Trying for 1 record per page. But all records are shown
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
- </div>
- // jquery - test1.js
$(document).ready(function () {
- RenderHtmlOnSuccess();
- $("#tb1")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
});
- function RenderHtmlOnSuccess() {
- // Data is getting filled. I can see 20 records
- $("#tbl1").append("<tbody>");
for (var i = 0; i < newsdata.length; i++) {
var newArray = newsdata[i].split('#');
for (var j = 0; j < newArray.length; j++) {
$("#tbl1").append("<tr><td>" + newArray[j] + "</td></tr> ");
}
- if (i < (newsdata.length - 1)) {
$("#tbl1").append("<tr><td class='spacers'></td></tr> ");
}
}
$("#tbl1").append("</tbody>");
- $('#tbl1 tr').each(function () {
//Checks the value and sets the color accordingly
if ($(this).find('td:first')) {
$(this).css('color', '#464a50');
}
});
}
How to fix this? I can see the pager templates, but it is not clickable.
How to make the pagination?
Thanks