How to link esimakin pagination with my table? - javascript

I am trying to use the esimakin jQuery Pagination plugin to break my table up into multiple pages because it is getting its data from an ever growing database. However my pagination bar does not:
Split table into pages
Change pages when I click next or previous.
Any advice would be much appreciated.
HTML:
<div class="table-responsive">
<div class="form-group pull-right">
<input type="text" id="myInput" onkeyup="filterTable()" class="search form-control" placeholder="Filter Table">
</div>
<div class="form-group pull-left">
Load Selected
</div>
<table id="draftTable" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th data-field="radio"></th>
<th data-field="bulletin_id">Bulletin ID</th>
<th data-field="event">Event</th>
<th data-field="badge_num">Badge Number</th>
<th data-field="AYEAR">Year</th>
</tr>
<tbody>
</tbody>
</thead>
</table>
</div>
<ul id="pagination" class="pagination-sm pull-right"></ul>
</div>
</div>
JS:
<script>
$(document).ready(function(){
populateTables('S');
});
function populateTables(res){
console.log(res)
$.getJSON("bulletinListJSON.asp", {res:res}, function(data){
}).done(function( data ) {
for (var i=0;i<=data.length;i++){
var draftData = "<tr><td><input type=radio value="+ i + " name=load id=load /></td><td>" + data[i].BULLETIN_ID + "</td><td>" + decodeURIComponent(data[i].EVENT) + "</td><td>" + data[i].BADGE_NUM + "</td><td>" + data[i].AYEAR + "</td></tr>";
$('#draftTable').find('tbody').append(draftData);
}
});
}
function filterTable(event) {
var filter = event.target.value.toUpperCase();
var rows = document.querySelector("#draftTable tbody").rows;
for (var i = 0; i < rows.length; i++) {
var firstCol = rows[i].cells[1].textContent.toUpperCase();
var secondCol = rows[i].cells[2].textContent.toUpperCase();
var thirdCol = rows[i].cells[3].textContent.toUpperCase();
var fourthCol = rows[i].cells[4].textContent.toUpperCase();
if (firstCol.indexOf(filter) > -1 || secondCol.indexOf(filter) > -1 || thirdCol.indexOf(filter) > -1 || fourthCol.indexOf(filter) > -1) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
}
}
document.querySelector('#myInput').addEventListener('keyup', filterTable, false);
$("#draftTable tr").click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
var value=$(this).find('td:second').html();
alert(value);
});
$('.ok').on('click', function(e){
alert($("#table tr.selected td:first").html());
});
//Pagination
$('#pagination').twbsPagination({
totalPages: 35,
visiblePages: 7,
items: 20,
itemOnPage: 8,
});
</script>

search in google:
jq dataTables
Wery nice table.
Search, Download (Excel, word, pdf), order column, server side or cliend side run, more more....
İm use this. 15 million rows.

The twbs-pagination plugin provides an onPageClick callback option; you'll need to implement that.
You could also dynamically set the total number of page based on the length of the response data.
A snippet from a simple gist based on your situation.
function setContent( page ) {
// generate markup to display
$('#page-content').html(data[page]);
}
$('#pagination').twbsPagination({
totalPages: data.length, // from $.ajax response
visiblePages: 7,
onPageClick: function (event, page) {
setContent(page);
}
});

Related

Add Items per page option

How to add an option like items per page with limit(dropdown with options 10,25,50) in the listing page.
It should be like show entries option in bootstrap datatables. I am using twbspagination.js for pagination. This is the sample link js-tutorials and given below is the source code.
<body>
<div class="container" style="padding:10px 20px;">
<h2>Pagination Example Using jQuery</h2>
<table id="employee" class="table table-bordered table table-hover" cellspacing="0" width="100%">
<colgroup><col width="20%"><col width="35%"><col width="40%"></colgroup>
<thead>
<tr>
<th>Name</th>
<th >Salary</th>
<th>Age</th>
</tr>
</thead>
<tbody id="emp_body">
</tbody>
</table>
<div id="pager">
<ul id="pagination" class="pagination-sm"></ul>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
var $pagination = $('#pagination'),
totalRecords = 0,
records = [],
displayRecords = [],
recPerPage = 10,
page = 1,
totalPages = 0;
$.ajax({
url: "https://www.js-tutorials.com/source_code/api_data/employee_all.php",
async: true,
dataType: 'json',
success: function (data) {
records = data;
console.log(records);
totalRecords = records.length;
totalPages = Math.ceil(totalRecords / recPerPage);
apply_pagination();
}
});
function generate_table() {
var tr;
$('#emp_body').html('');
for (var i = 0; i < displayRecords.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + displayRecords[i].employee_name + "</td>");
tr.append("<td>" + displayRecords[i].employee_salary + "</td>");
tr.append("<td>" + displayRecords[i].employee_age + "</td>");
$('#emp_body').append(tr);
}
}
function apply_pagination() {
$pagination.twbsPagination({
totalPages: totalPages,
visiblePages: 6,
onPageClick: function (event, page) {
displayRecordsIndex = Math.max(page - 1, 0) * recPerPage;
endRec = (displayRecordsIndex) + recPerPage;
console.log(displayRecordsIndex + 'ssssssssss'+ endRec);
displayRecords = records.slice(displayRecordsIndex, endRec);
generate_table();
}
});
}
});
</script>
You can do this with below steps:
1) Add a drop down in your ui which show records per page, something like this:
<select id="recPerPage" onchange="apply_pagination();">
<option value="5">5</option>
<option value="10" selected='selected'>10</option>
<option value="20">20</option>
</select>
You can add this above or below the table as per your ui preferences.
Please note the dropdown should trigger the function apply_pagination onchange. I have added event handling inline just for reference. You should do it via addEventListner
2) In your code function apply_pagination() should get the current value of the recPerPage dropdown at the begining like this:
`recPerPage = $('#recPerPage').val();`
That should do the do the trick for you.
Your can also set the default value for recPerPage by replacing this:
recPerPage = 10,
with this:
recPerPage = $('#recPerPage').val(),
Update:
The pagination plugin you are using has a correct/updated version linked here
and
It has the dynamic total pages issue documented here , look for the heading "Dynamic Total number of pages"
Above should help you, I think.

Javascript filter on html table does not work if it is injected to div. if table is loaded with page it works

I want to filter out table before loading it to reduce it's size that it would load faster, when its loaded i would like to let user to filter it. I am using public CDN script for filter part, but it does not work on content which is injected to . It only works if whole table is loaded together with page.. what i'am doing wrong?
Jsfilter: <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tablefilter/2.5.0/tablefilter.js"></script>
DetailedRport.html
//this function called on button click it gets user and date to resize data set
<script type="text/javascript">
function myFunction() {
var y = document.getElementById("month-input").value;
var z = document.getElementById("email2").value;
//here is called server side script
google.script.run.withSuccessHandler(onSuccess).functionToRunOnFormSubmit(y, z);
}
//Resized data set gets injected to tbody
function onSuccess(c){
var table=toHTMLTable(c);
document.getElementById('myOutput1').innerHTML = table;
}
//Array to HTML table
function toHTMLTable(a) {
var content = a.map(function(row, i) {
var rowHTML = row.map(function (col) {
return "<td>" + col + "</td>";
}).join("");
return "<tr>" + rowHTML + "</tr>";
}).join("");
return content;
}
</script>
//user selects criteria for data table
<b> Report for:</b>
<select value="" name="email2" id="email2" width="300" autofocus="autofocus" autocorrect="off" autocomplete="off">
<?!= myEmails(); ?>
</select>
<b>Pick Period :</b>
<select name="Student" id="month-input" autofocus="autofocus" autocorrect="off" autocomplete="off">
<?!= myDates(); ?>
</select>
//On click table is loaded based on selection
<input type="button" value="Load Data" class="loadbutton" onclick="myFunction();" >
<br><br>
//Js tablefilter which should work but does not if table is injected
<table id="table1"class="mytable TF" cellspacing="0" cellpadding="0">
<thead>
<tr class="header">
<th style="width:5%;">TASK</th>
<th style="width:20%;">PROJECT</th>
<th style="width:30%;">DATE</th>
<th style="width:10%;">TIME SPENT</th>
<th style="width:10%;">WORDCOUNT</th>
<th style="width:10%;">SPEED</th>
</tr>
</thead>
//Where data table is injected
<tbody id="myOutput1">
</tbody>
</table>
//Setting Js tablefilter source http://tablefilter.free.fr/
<script language="javascript" type="text/javascript">
var tf = setFilterGrid("table1");
</script>
server.gs
// here data set gets filtered based on users selection and is sent back
// Using ArrayLib library
function functionToRunOnFormSubmit(y,z) {
var ss = SpreadsheetApp.openById(id);
var ActiveSheet = ss.getSheetByName("TogglMap");
var StartRow = 2;
var RowRange = ActiveSheet.getLastRow() - StartRow + 1;
var EMWholeRange = ActiveSheet.getRange(StartRow,2,RowRange,13);
var AllValues = EMWholeRange.getDisplayValues();
var dat = y +'-01'
var removeCol = function(arr, colIndex, colIndex2) {
for (var i = 0; i < arr.length; i++) {
var row = arr[i];
row.splice(colIndex, colIndex2);
}
}
removeCol(AllValues, 5 , 6);
var filteredArr1 = ArrayLib.filterByText(AllValues, 1, z)
var filteredArr2 = ArrayLib.filterByText(filteredArr1, 3, dat)
removeCol(filteredArr2, 1 ,1);
Logger.log(AllValues)
return filteredArr2
};
My goal is working JS filter

How to fill in a table from a input using jQuery and ajax?

I have been trying to fill in a table based on the search result using jQuery and ajax but I can't make it work.
Here is the html code:
<form class="form">
<div class="form-group">
<label for="livsmedelsSokOrd">Livsmedel</label>
<input type="search" class="form-control" id="livsmedelsSokOrd" placeholder="t ex makaroner">
</div>
<button type="button" class="btn btn-default" id="sok-button">Sök</button>
</form>
<table id="tabell" class="table">
<thead>
<tr>
<th>Livsmedel</th>
<th>Energi (kcal/100g)</th>
<th>Kolhydrater</th>
<th>Protein</th>
<th>Fett</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JS:
$("#sok-button").click(function(){
$.ajax({
url : "getlivsmedel.php",
dataType : "jsonp",
data : {
namn: $('input#livsmedelsSokOrd').val()
},
success : function(response){
var foodArray = response.livsmedel;
for (var i = 0; i< foodArray; i++){
var namn = response[i].namn;
var energi = response[i].energi;
var protein = response[i].protein;
var fett = response[i].fett;
var kolhydrater = response[i].kolhydrater;
$("#tabell").append(
"<tr><td>"+ namn +"</td><td>"+ energi +"</td><td>"+ protein +"</td><td>"+ fett +"</td><td>"+ kolhydrater +"</td></tr>"
);
}
}
});
});
After I press the search button I can see in the javascript console that it loads the php but it doesn't fill the table, and I have tried everything I can think about.
Your loop has 2 problems.
You need i < foodarray.length instead of i < foodarray and response[i] should be foodarray[i]
Try adjusting to:
for (var i = 0; i< foodArray.length; i++){
var namn = foodArray[i].namn;
......
You should be seeing errors in browser console that response[i] is undefined
You should be appending the <tr> to <tbody> instead of <table>. $("#tabell").append should become $("#tabell tbody").append

Data rendered to jquery datatable using innerHTML shows "No data"

I'm new to javascript. I'm developing a web app using javascript and HTML. Here is the code:
<html>
<body>
<table class="table table-striped table-bordered bootstrap-datatable datatable responsive">
<thead>
<tr>
<th>No:</th>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="result11" >
<script type="text/javascript">
Parse.initialize("keyyyyyy", "idddddddddddddddddddddd");
var GameScore = Parse.Object.extend("doctor_details");
var query = new Parse.Query(GameScore);
query.find({
success: function(results) {
for (var i = 0; i < results.length; i++) {
var object = results[i];
var docname = object.get('doc_name');
var date = object.get('doc_regdate');
var k = i + 1;
document.getElementById('result11').innerHTML +="<tr ><td>"+k+"</td><td>"+docname+"</td><td>"+date+"</td><td>doctor</td><td><a class='btn btn-info' href='edit-doctor.php'><i class='glyphicon glyphicon-edit icon-white'></i>Edit</a></td></tr>";
}
},
error: function(error) {
alert("Error: " + error.code + " " + error.message);
}
});
</script>
</tbody>
</table>
</body>
</html>
The problem is that I fetch data from parse using javascript parse sdk and render the data to the "tbody" of the data table using inner HTML. Here I get data table showing "no data".Dynamic data displaying only after the data table is displayed.
Pagination,search nothing is working.
I need to know how can I render data when the data table loads.Thanks in advance.

Filtering table rows upon Search

I am trying to filter the rows of a table to display the results of entered text in the search bar. The code below does the job but for some reason filters the column headings as well.
$('#search').keyup(function () {
var data = this.value.split(" ");
var rows = $(".Info").find("tr").hide();
if(this.value ==""){
rows.show();
return;
}
rows.hide();
rows.filter(function(i,v){
var t = $(this);
for (var d = 0; d < data.length; d++) {
if (t.is(":Contains('" + data[d] + "')")) {
return true;
}
}
return false;
}).show();
});
HTML
<input type = "search" name = "search" id = "search">
<table style ="width:95%" class = "Info">
<tr>
<th>Select </th>
<th>Name</th>
<th>Number</th>
<th>Date</th>
</tr>
</table>
The user adds rows which is why i haven't written any HTML for it.
Any help would be appreciated. Thanks in advance
http://jsfiddle.net/szjhngwm/
It looks like you need to filter using tbody
<table style ="width:95%" class = "Info">
<thead>
<tr>
<th>Select </th>
<th>Name</th>
<th>Number</th>
<th>Date</th>
</tr>
<thead>
<tbody>
</tbody>
</table>
var rows = $(".Info tbody tr").hide();
Another way to do this would be to use jQuery's :gt() selector.
The only thing that would change is this line:
var rows = $(".Info").find("tr:gt(0)").hide();
Notice the addition of :gt(0) to your tr.

Categories

Resources