I have problem in sorting and pagination, i am using json.htmTable.js and there is dropdown option where list of company names occur and on basis of selecting the company names i am filling a table using above mentioned javascript, Also there is a radio button for individual rows onclick of that i am displaying child rows. Now i need sorting and pagination can anyone help me in this.This is my code. Please can someone tell me how do I add sorting and Pagination for this.\[code\]** This is my Javascript ** // This function creates a standard table with column/rows // Parameter Information // objArray = Anytype of object array, like JSON results // theme (optional) = A css class to add to the table (e.g. <table class="<theme>"> // enableHeader (optional) = Controls if you want to hide/show, default is show function CreateTableView(objArray, id, height, img_path, theme, enableHeader) { // set optional theme parameter if (theme === undefined) { theme = 'mediumTable'; //default theme } if (enableHeader === undefined) { enableHeader = true; //default enable headers } var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray; $str1 = "scroll_grid_view_"; var str ='<div class="'+$str1.concat(id)+'" style="height:' + height +'px; overflow-y: scroll; overflow-x: hidden;">'; str += '<div id="images" class="div-table">'; //'<table class="' + theme + '">'; // table head if (enableHeader) { str += '<div class="div-table-row" style="width:100%">'; for (var index in array[0]) { str += '<div class="div-table-col" style="width:5%; background:#dddddd;"><strong>' + index + '</strong></div>'; } str += '</div>'; } // table body //str += '<tbody>'; var count =0; for (var i = 0; i < array.length; i++) { //<div class="div-table-row" style="width:100%"> // str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>'; //str += (i % 2 == 0) ? '<div class="alt">' : '<tr>'; str += '<div class="div-table-row" style="width:100%">'; for (var index in array) { //alert(); //alert(array[index].substr(-4) ); var img = array[index].substr(-4); var unique_id = array[index].substr(6); var radio = array[index].substr(0,5); var name1 = "'name_"+unique_id+"'"; var tsname = "'"+id+"'"; //alert(radio); if( img === ".gif" || img === ".png" || img === ".jpg" || img === ".svg") { str += '<div class="div-table-col" style="border-top:0px;">' + '<img src="' + img_path + array[index] + '"/>' + '</div>'; } else if(radio === "radio") { if(count == 0) { count++; str += '<div class="div-table-col" style="border-top:0px;">' + '<input type="radio" checked id="name_'+unique_id +'" original-title="" name="list" value="'+unique_id +'" onclick="document.getElementById('+tsname+').value = http://stackoverflow.com/questions/15598402/document.getElementById('+name1+').value">'+ '</div>'; } else { str += '<div class="div-table-col" style="border-top:0px;">' + '<input type="radio" id="name_'+unique_id +'" original-title="" name="list" value="'+unique_id +'" onclick="document.getElementById('+tsname+').value = http://stackoverflow.com/questions/15598402/document.getElementById('+name1+').value">'+ '</div>'; } } else { str += '<div class="div-table-col" style="border-top:0px;">' + array[index] + '</div>'; } } str += '</div>'; } // str += '</tbody>' str += '</div>'; str += '</div>'; return str; } // This function creates a standard table with column/rows // Parameter Information // objArray = Anytype of object array, like JSON results // theme (optional) = A css class to add to the table (e.g. <table class="<theme>"> // enableHeader (optional) = Controls if you want to hide/show, default is show function CreateTableViewX(objArray, theme, enableHeader) { // set optional theme parameter if (theme === undefined) { theme = 'mediumTable'; //default theme } if (enableHeader === undefined) { enableHeader = true; //default enable headers } var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray; var str = '<table class="' + theme + '">'; // table head if (enableHeader) { str += '<thead><tr>'; for (var index in array[0]) { str += '<th scope="col">' + index + '</th>'; } str += '</tr></thead>'; } // table body str += '<tbody>'; for (var i = 0; i < array.length; i++) { str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>'; for (var index in array) { str += '<td>' + array[index] + '</td>'; } str += '</tr>'; } str += '</tbody>' str += '</table>'; return str; } // This function creates a details view table with column 1 as the header and column 2 as the details // Parameter Information // objArray = Anytype of object array, like JSON results // theme (optional) = A css class to add to the table (e.g. <table class="<theme>"> // enableHeader (optional) = Controls if you want to hide/show, default is show function CreateDetailView(objArray, theme, enableHeader) { // set optional theme parameter if (theme === undefined) { theme = 'mediumTable'; //default theme } if (enableHeader === undefined) { enableHeader = true; //default enable headers } var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray; var str = '<table class="' + theme + '">'; str += '<tbody>'; for (var i = 0; i < array.length; i++) { var row = 0; for (var index in array) { str += (row % 2 == 0) ? '<tr class="alt">' : '<tr>'; if (enableHeader) { str += '<th scope="row">' + index + '</th>'; } str += '<td>' + array[index] + '</td>'; str += '</tr>'; row++; } } str += '</tbody>' str += '</table>'; return str; }\[/code\]** This is my Layout **\[code\]function loadfolderlist(account, accname) { $('#DynamicGridp_2').hide(); var loading = '<div id="DynamicGridLoadingp_2"> '+ '<div id="simpleTable"> '+ ' <img src="http://stackoverflow.com/questions/15598402/<?=img_path() ?>loading.gif" /><span> Loading Party List... </span> '+ ' </div>'; $.ajax({ type: "POST", url: "<?php echo fuel_url('company/workinprogress_list');?>", data: "party_account_name=" + account, dataType: "json" }).done(function( msg ) { if(msg.length == 0) { $('#DynamicGridp_2').hide(); $('#DynamicGridLoadingp_2').hide(); var loading1 = '<div id="error_msg"> '+ 'No Result!'+ '</div>'; $('#partycontent').html(loading1); } else{ var partydata = http://stackoverflow.com/questions/15598402/[]; for (var i = 0; i < msg.length; i++) { var item = msg; var thisdata = {}; /*var selectcoil ='<input type="radio" id="radio_'+item.coilnumber+'" name="list" value="'+item.coilnumber+'" onClick=showchild("'+item.coilnumber+'") />'; thisdata["select"] = selectcoil;*/ thisdata["id"] = item.id; thisdata["empname"] = item.empname; thisdata[" date"] = item.date thisdata["process"] = item.process; var cs = '<a title="Print" href="'+item.cs+'" target="_blank"><img src="http://stackoverflow.com/questions/15598402/<?php echo img_path('iconset/id.png'); ?>" /></a>'; var fi = '<a href="'+item.fi+'"><img title="EMPTask" src="http://stackoverflow.com/questions/15598402/<?php echo img_path('iconset/emp_task.png'); ?>" /></a>'; thisdata["action"] = cs + ' ' + bl ; partydata.push(thisdata); } if (partydata.length) { // If there are files $('#DynamicGridp_2').hide(); $('#DynamicGridLoadingp_2').hide(); $('#partycontent').html(CreateTableViewX(partydata, "lightPro", true)); var lcScrollbar = $('#contentsholder'); fleXenv.updateScrollBars(lcScrollbar); } else { $('#DynamicGridp_2').hide(); $('#DynamicGridLoadingp_2').hide(); var loading1 = '<div id="error_msg"> '+ 'No Result!'+ '</div>'; $('#partycontent').html(loading1); var lfScrollbar = $('#contentsfolder'); fleXenv.updateScrollBars(lfScrollbar); } } });}</script> \[/code\]
Sorting and Pagination
- Thread starter Benitasss
- Start date