Dynamically Load More Table Rows Example by JQuery -Simple & Useful Developer tool


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

<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

Leave A Comment...