Dynamic table in jquery, dynamic table creation

Create dynamic table in jquery:-
   Create a table on execution time is called dynamic table. Many plugins available for this dynamic table like telerik grid and more. The below example is used to create a dynamic table without using any external plugins.
    This table having pagination, and you can easy to change your design like color position number of columns.


Example Program:- (Editor)

<style type="text/css"> .th_style { padding: 10px; background: rgb(86, 146, 201); color: #FFF; text-align: center; border: 1px solid rgb(123, 123, 124); } #RepTab td { border: 1px solid #a3cef1; height: 15px; padding: 5px; text-align: center; border: 1px solid rgb(123, 123, 124); } #RepTab { width: 100%; float: left; } #RepTab tr { height: 27px; } #page_navigation_TReportFull { padding: 10px 0px 10px 0px; float: left; width: 98%; text-align: center; } div#page_navigation_TReportFull a { color: #555555; background: #FFFFFF; padding: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border: 1px solid #99B5CC; text-decoration: none; } div#page_navigation_TReportFull a:hover { border: 1px solid Red; } </style> <script type="text/javascript"> var hdnPageSize1=20; var hdnCurrentPage1=0; var hdnNxtPageSize=5; var hdnNxtCurrentPage=0; var result=[]; var total_record=500; $(window).ready(function(){ for(var i=0;i<total_record;i++) { var obj=new Object(); obj.SLNO=parseInt(i)+1; obj.Name="Name : "+i; obj.Tamil="Tamil : "+i; obj.Maths="Maths : "+i; obj.English="English : "+i; obj.Computer="Computer : "+i; obj.count=total_record; result.push(obj); } Table_initilize(); }); function BindPagination_TReportrequest(arg) { $("#page_navigation_TReportFull").empty(); var paginationDiv = $("#page_navigation_TReportFull"); var totalRecords = new Number(arg); var pageSize = new Number(hdnPageSize1); var noOfPages = totalRecords / pageSize; noOfPagesActive = noOfPages; var nxtpagesize = hdnNxtPageSize; var nxtcurrentpage = hdnNxtCurrentPage; if (nxtcurrentpage != 0) { paginationDiv.append("<a href='#' class='back_class' id='paginationLink_TReportrequest" + i + "'onclick='GOTOBACKSET(" + arg + ");return false;'>Back</a>"); paginationDiv.append(" "); } for (var i = 0; i < noOfPages; i++) { paginationDiv.append("<span id='remove" + i + "'><a href='#' class='pagination_remove' id='paginationLink_TReportrequest" + i + "'onclick='gotoPage(" + i + ");return false;'>" + (i + 1) + "</a> </span>"); paginationDiv.append(""); } for (var i = 0; i < noOfPagesActive; i++) { if (i == hdnCurrentPage1) { $("#paginationLink_TReportrequest" + i).css('border', '1px solid Red'); $("#paginationLink_TReportrequest" + i).css('cursor', 'default'); $("#paginationLink_TReportrequest" + i).removeAttr('href'); } else { $("#paginationLink_TReportrequest" + i).css('border', '1px solid #99B5CC'); } } var currentPageIndex = hdnCurrentPage1; var PageSize = hdnPageSize1; $("#Pagination_count").empty(); var upto_page = parseInt(parseInt(PageSize) + parseInt(currentPageIndex * PageSize)); if (arg < parseInt(parseInt(PageSize) + parseInt(currentPageIndex * PageSize))) { upto_page = arg; } var page_text = "Page " + parseInt(parseInt(hdnCurrentPage1) + 1) + " of " + parseInt(parseInt(noOfPages) + 1) + ",Items " + parseInt(parseInt(currentPageIndex * PageSize) + 1) + " to " + upto_page + " of " + arg + "."; $("#Pagination_count").append(page_text); var start = parseInt(nxtcurrentpage * nxtpagesize); var end = parseInt(nxtpagesize) + parseInt(nxtcurrentpage * nxtpagesize); var count = 0; var removed = 0; $(".pagination_remove").each(function () { if (count >= start && count < end) { } else { $("#remove" + count).remove(); removed = 1; } count++; }); if (removed == 1) { paginationDiv.append("<a href='#' class='next_class' id='paginationLink_TReportrequest" + i + "' onclick='GOTONEXTSET(" + arg +");return false;'>Next</a>"); paginationDiv.append(" "); } if (nxtcurrentpage == 0) { $(".back_class").remove(); } if (count <= parseInt(parseInt(nxtpagesize) + parseInt(nxtcurrentpage * nxtpagesize))) { $(".next_class").remove(); } } function GOTONEXTSET(arg) { hdnNxtCurrentPage=parseInt(parseInt(hdnNxtCurrentPage + 1)); BindPagination_TReportrequest(arg); gotoPage(parseInt(hdnNxtCurrentPage) * parseInt(hdnNxtPageSize)); } function GOTOBACKSET(arg) { hdnNxtCurrentPage=parseInt(parseInt(hdnNxtCurrentPage) - 1) BindPagination_TReportrequest(arg); gotoPage(parseInt(hdnNxtCurrentPage) * parseInt(hdnNxtPageSize)); } function gotoPage(index) { hdnCurrentPage1=index; Table_initilize(); } function Table_initilize() { $("#divReport").show(); $("#RepTab").empty(); $("#page_navigation_TReportFull").empty(); if (result.length > 0) { BindPagination_TReportrequest(result[0].count); var strTab = ""; strTab += "<table width='100%' cellpadding='0' cellspacing='0' style='border-collapse:collapse; margin-left: 0px;'><tr style='background-color: #a3cef1;'>"; strTab += "<th class='th_style'>Sl.No</th><th class='th_style'>Name</th><th class='th_style'>Tamil</th><th class='th_style'>Maths</th><th class='th_style'>English</th><th class='th_style'>Computer</th></tr>"; var currentPageIndex = hdnCurrentPage1; var PageSize = hdnPageSize1; var upto_page = parseInt(parseInt(PageSize) + parseInt(currentPageIndex * PageSize)); if (result.length < parseInt(parseInt(PageSize) + parseInt(currentPageIndex * PageSize))) { upto_page = result.length; } for (var i = parseInt(parseInt(currentPageIndex * PageSize) ); i < upto_page; i++) { strTab += "<tr style='background-color: #FFFFFF;'>"; strTab += "<td>"+ result[i].SLNO+"</td>"; strTab += "<td>"+ result[i].Name+"</td>"; strTab += "<td>"+result[i].Tamil+"</td>"; strTab += "<td>"+ result[i].Maths+"</td>"; strTab += "<td>"+ result[i].English+"</td>"; strTab += "<td>"+ result[i].Computer+"</td>"; strTab += "</tr>"; } $("#RepTab").append(strTab); } else { $("#RepTab").append("<center><b>No Records to Display</b></center>"); $("#Pagination_count").empty(); } } </script> <br /> <div id="divReport" style="display: none; float: left; margin-top: 20px; width: 100%;"> <div style="width: 100%;"> <div style="background: #a3cef1 !important; border-top-left-radius: 4px; border-top-right-radius: 4px; float: left; margin-top: 12.5px; width: 20%;"> <div> Dynamic Table </div> </div> </div> <div style="float: left; overflow-x: scroll; width: 100%;"> <div id="ReportContent" style="margin: .3%;"> <table cellpadding="0" cellspacing="0" id="RepTab" style="width: 100%;"> </table> </div> </div> <div id="sample_div" style="background-color: #accbf3; background-image: none; color: black; float: left; width: 100%;"> <div id="Pagination_count" style="float: right; padding-top: 1%;"> </div> <div style="float: left; width: 42%;"> <table> <tbody> <tr> <td><div id="page_navigation_TReportFull"> </div> </td> </tr> </tbody></table> </div> </div> </div> <br />
Submit Changes	Reset
output:-

Program Explanation:-

var hdnPageSize1=20; => This Value is indicate how many data display in each page,
var hdnCurrentPage1=0; => This is the starting data index

var hdnNxtPageSize=5;  => How many page display in every view
var hdnNxtCurrentPage=0; => Starting page index

This Following Code is inserting data manually, you can replace by your data.

var result=[];
var total_record=500;
$(window).load(function(){
for(var i=0;i<total_record;i++)
{
var obj=new Object();
obj.SLNO=parseInt(i)+1;
obj.Name="Name : "+i;
obj.Tamil="Tamil : "+i;
obj.Maths="Maths : "+i;
obj.English="English : "+i;
obj.Computer="Computer : "+i;
obj.count=total_record;
result.push(obj);
}
Table_initilize();
});

Advertisement

ScreenShot:-