Load more table rows by JQuery : Below is the jQuery based load more table example > Many time we need this functionality to be developed in our website application and its a time taking job, if its not already developed in your application, So I have created this example to save your time , you have to just copy and paste this code to your application.
The two things you have consider before using this code to your application . Use any jQuery framework,it could be 1.8.1 or 1.1.1, t This code will work smoothly on any jQuery framework without any issue. Now the second part is you need to change table id instead of existing one. whichever applicable to your application or you have use the same one.
Now the configuration part , you just have to change one line i.e. row2disaply, default I have added 4 rows to display ,you can change it as per your requirement.
If you think this code will importer much better , please leave your comment or contact me. Thanks
The two things you have consider before using this code to your application . Use any jQuery framework,it could be 1.8.1 or 1.1.1, t This code will work smoothly on any jQuery framework without any issue. Now the second part is you need to change table id instead of existing one. whichever applicable to your application or you have use the same one.
Now the configuration part , you just have to change one line i.e. row2disaply, default I have added 4 rows to display ,you can change it as per your requirement.
If you think this code will importer much better , please leave your comment or contact me. Thanks
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
var totalrowshidden;
var rows2display=4;
var rem=0;
var rowCount=0;
var forCntr;
var forCntr1;
var MaxCntr=0;
$('#hide').click(function() {
var rowCount = $('#jsWebKitTable tr').length;
rowCount=rowCount/2;
rowCount=Math.round(rowCount)
for (var i = 0; i < rowCount; i++) {
$('tr:nth-child('+ i +')').hide(300);
}
});
$('#show').click(function() {
rowCount = $('#jsWebKitTable tr').length;
MaxCntr=forStarter+rows2display;
if (forStarter<=$('#jsWebKitTable tr').length)
{
for (var i = forStarter; i < MaxCntr; i++)
{
$('tr:nth-child('+ i +')').show(200);
}
forStarter=forStarter+rows2display
}
else
{
$('#show').hide();
}
});
$(document).ready(function() {
var rowCount = $('#jsWebKitTable tr').length;
for (var i = $('#jsWebKitTable tr').length; i > rows2display; i--) {
rem=rem+1
$('tr:nth-child('+ i +')').hide(200);
}
forCntr=$('#jsWebKitTable tr').length-rem;
forStarter=forCntr+1
});
});
</script>
<table id="jsWebKitTable" style="width:100%">
<tr>
<td>JavaScriptWebKit_td1</td>
<td>JavaScriptWebKit_td2</td>
<td>1</td>
</tr>
<tr>
<td>JavaScriptWebKit_td1</td>
<td>JavaScriptWebKit_td2</td>
<td>2</td>
</tr>
<tr>
<td>JavaScriptWebKit_td1</td>
<td>JavaScriptWebKit_td2</td>
<td>3</td>
</tr>
<tr>
<td>JavaScriptWebKit_td1</td>
<td>JavaScriptWebKit_td2</td>
<td>4</td>
</tr>
<tr>
<td>JavaScriptWebKit_td1</td>
<td>JavaScriptWebKit_td2</td>
<td>5</td>
</tr>
<tr>
<td>JavaScriptWebKit_td1</td>
<td>JavaScriptWebKit_td2</td>
<td>6</td>
</tr>
<tr>
<td>JavaScriptWebKit_td1</td>
<td>JavaScriptWebKit_td2</td>
<td>7</td>
</tr>
<tr>
<td>JavaScriptWebKit_td1</td>
<td>JavaScriptWebKit_td2</td>
<td>8</td>
</tr>
<tr>
<td>JavaScriptWebKit_td1</td>
<td>JavaScriptWebKit_td2</td>
<td>9</td>
</tr>
<tr>
<td>JavaScriptWebKit_td1</td>
<td>JavaScriptWebKit_td2</td>
<td>10</td>
</tr>
<tr>
<td>JavaScriptWebKit_td1</td>
<td>JavaScriptWebKit_td2</td>
<td>11</td>
</tr>
<tr>
<td>JavaScriptWebKit_td1</td>
<td>JavaScriptWebKit_td2</td>
<td>12</td>
</tr>
<tr>
<td>JavaScriptWebKit_td1</td>
<td>JavaScriptWebKit_td2</td>
<td>13</td>
</tr>
<tr>
<td>JavaScriptWebKit_td1</td>
<td>JavaScriptWebKit_td2</td>
<td>14</td>
</tr>
<tr>
<td>JavaScriptWebKit_td1</td>
<td>JavaScriptWebKit_td2</td>
<td>15</td>
</tr>
<tr>
<td>JavaScriptWebKit_td1</td>
<td>JavaScriptWebKit_td2</td>
<td>16</td>
</tr>
</table>
<input id="show" type="button" value="Load More Table Rows..... "/>
Try this- Load More Table Rows Example by JQuery
| JavaScriptWebKit_td1 | JavaScriptWebKit_td2 | 1 |
| JavaScriptWebKit_td1 | JavaScriptWebKit_td2 | 2 |
| JavaScriptWebKit_td1 | JavaScriptWebKit_td2 | 3 |
| JavaScriptWebKit_td1 | JavaScriptWebKit_td2 | 4 |
| JavaScriptWebKit_td1 | JavaScriptWebKit_td2 | 5 |
| JavaScriptWebKit_td1 | JavaScriptWebKit_td2 | 6 |
| JavaScriptWebKit_td1 | JavaScriptWebKit_td2 | 7 |
| JavaScriptWebKit_td1 | JavaScriptWebKit_td2 | 8 |
| JavaScriptWebKit_td1 | JavaScriptWebKit_td2 | 9 |
| JavaScriptWebKit_td1 | JavaScriptWebKit_td2 | 10 |
| JavaScriptWebKit_td1 | JavaScriptWebKit_td2 | 11 |
| JavaScriptWebKit_td1 | JavaScriptWebKit_td2 | 12 |
| JavaScriptWebKit_td1 | JavaScriptWebKit_td2 | 13 |
| JavaScriptWebKit_td1 | JavaScriptWebKit_td2 | 14 |
| JavaScriptWebKit_td1 | JavaScriptWebKit_td2 | 15 |
| JavaScriptWebKit_td1 | JavaScriptWebKit_td2 | 16 |
No comments:
Post a Comment