Develop Reference

How to get table records from a table with multiple pages?

I have a table with pagination using DataTables. I am trying to display the table records in a Bootstrap modal. The problem is that I can only get records from the first page which displays only 10 records. I can't get records from the second and other pages; it keeps displaying the last record I chose from the first page.
There might be a method I am missing to get the values from the following pages.
<table class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Product Name</th>
<th scope="col">Supplier</th>
<th scope="col">Volume</th>
<th scope="col">Quantity</th>
<th scope="col">Buying Price</th>
<th scope="col">Selling Price</th>
<th scope="col">Expiry Date</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php include "include/read.inc.php"?>
</tbody>
</table>
$(document).ready(function() {
$('.table').DataTable();
$('.editbtn').on('click', function() {
$('#editModal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children('td').map(function() {
return $(this).text();
}).get();
console.log(data);
var str = data[3];
var res1 = str.match(/[0-9]/);
var res2 = str.match(/[a-z]+/i);
$('#id').val(data[0]);
$('#name').val(data[1]);
$('#supplier').val(data[2]);
$('#vol').val(res1);
$('#unit').val(res2);
$('#qty').val(data[4]);
$('#bprice').val(data[5]);
$('#sprice').val(data[6]);
$('#editExpDate').val(data[7]);
});
});

Appreciations #freedomn-m for your contributions, I finally figured out the problem, it lied on the selector line, I had to include the button selector inside the on('click', 'button_selector', function()); to look something like this
$('.table').on('click','.editBtn', function(){
$tr = $(this).closest('tr');
var data = $tr.children('td').map(function(){
return $(this).text();
}).get();
Regards.

Display objects with the same key in one row

I got this objects
{"key":["0114","1","2013"],"values":["279"]},
{"key":["0114","1","2014"],"values":["235"]},
{"key":["0114","1","2015"],"values":["258"]},
{"key":["0114","1","2016"],"values":["274"]},
{"key":["0114","1","2017"],"values":["293"]}
0114 is a county in sweden.
1 is symbolizes men
2013... is the years
values is the amount of men born in ex. 2013
I want to display them like this:
How it looks right now:
How i'm displaying rightnow :
<div class="tabellWrapper">
<table class="kommunerMainWrapper" >
<thead>
<tr>
<td >Kommun</td>
<th >Kön</th>
<th >2013</th>
<th >2014</th>
<th >2015</th>
<th >2016</th>
<th >2017</th>
</tr>
</thead>
<tbody class="kommunerWrapper" >
<template v-for="(data,index) in selectedLanData">
<tr v-if="data.key[1] ==='1'" :key="index">
<th class="kommunerItem kommun">{{data.key[0]}}</th>
<th class="kommunerItem sex" >Män</th>
<th class="kommunerItem numbers">{{data.values[0]}}</th>
<th class="kommunerItem numbers">{{data.key[2]}}</th>
</tr>
<tr v-else :key="index">
<th class="kommunerItem kommun">{{data.key[0]}}</th>
<th class="kommunerItem sex" >Kvinnor</th>
<th class="kommunerItem numbers">{{data.values[0]}}</th>
<th class="kommunerItem numbers">{{data.key[2]}}</th>
</tr>
</template>
</tbody>
</table>
</div>
</div>

I think you should parse your data array before. If it is a possibility for you, this could be the code:
var source = [
{"key":["0114","1","2013"],"values":["279"]},
{"key":["0114","1","2014"],"values":["235"]},
{"key":["0114","1","2015"],"values":["258"]},
{"key":["0114","1","2016"],"values":["274"]},
{"key":["0114","1","2017"],"values":["293"]}
];
var parsed = {};
for (var i=0; i<source.length; i++) {
var key = source[i].key;
if (!(source[i].key[0] in parsed)) {
parsed[source[i].key[0]] = {};
}
if (!(source[i].key[1] in parsed[source[i].key[0]])) {
parsed[source[i].key[0]][source[i].key[1]] = {};
}
if (!(source[i].key[2] in parsed[source[i].key[0]][source[i].key[1]])) {
parsed[source[i].key[0]][source[i].key[1]][source[i].key[2]] = 0;
}
parsed[source[i].key[0]][source[i].key[1]][source[i].key[2]] += parseInt(source[i].values);
}
console.log(parsed);

You can simply do it with the reduce function as so:
const data = [
{"key":["0114","1","2013"],"values":["279"]},
{"key":["0114","1","2014"],"values":["235"]},
{"key":["0114","1","2015"],"values":["258"]},
{"key":["0114","1","2016"],"values":["274"]},
{"key":["0114","1","2017"],"values":["293"]}
];
const tableRows = data.reduce((rows, value) => {
let currentRow = rows.find(row => row.region === value.key[0] && row.gender === value.key[1]);
if (!currentRow) {
currentRow = {region: value.key[0], gender: value.key[1]};
rows.push(currentRow);
}
currentRow[value.key[2]] = value.values[0];
return rows;
}, []);
console.log(tableRows);

td element not parsed to int

I have a table with id #tab1.
For each row, I want to calculate the value of column Points / Matches and to put it in the column Coeficiency, but my code doesn't work.
The numbers aren't parsed to int. I would always like to know if
elem[4].innerHTML(z); is ok to set coeficiency.
Average();
function Average() {
var table = document.getElementById('tab1'),
rows = table.getElementsByTagName('tbody')[1].getElementsByTagName('tr');
//console.log(rows.length);
for (var i = 0; i < rows.length; i++) {
elem = rows[i].getElementsByClassName("columns");
var x = parseInt(elem[2]);
var y = parseInt(elem[3]);
// console.log(x+y," ");
console.log(x, " ", y);
var z = y / x;
elem[4].innerHTML(z);
}
<div id="mytable">
<table id="tab1">
<tr class="rows">
<th class="columns">#</th>
<th class="columns">Team</th>
<th class="columns">Matches</th>
<th class="columns">Points</th>
<th class="columns">Coeficiency</th>
</tr>
<tbody>
<tr class="rows">
<td class="columns">1</td>
<td class="columns">Baetasii</td>
<td class="columns">3</td>
<td class="columns">9</td>
<td class="columns">100%</td>
</tr>
<tr class="rows">
<td class="columns">2</td>
<td class="columns">Carcotasii</td>
<td class="columns">2</td>
<td class="columns">5</td>
<td class="columns">100%</td>
</tr>
</tbody>
</table>
</div>

Okay, so a few pointers having looked over your code, first of all innerHTML is not a function, it's a simple property, you can just reassign it, however, I suggest using textContent due to the fact that using innerHTML, you can allow for XSS to occur.
I mean I know XSS probably isn't an issue in this specific scenario, however I thought it my be of value mentioning that.
Also, as I mentioned in the comments above, using parseInt, you need to pass it a string rather than an object which is what you were originally doing. Using functions such as getElementsByClassName or querySelectorAll, you'll have an array-like object, such as a HTMLCollection which contains a number of objects, usually Elements or Nodes.
Average();
function Average() {
var table = document.getElementById('tab1'),
rows = table.getElementsByTagName('tbody')[1].getElementsByTagName('tr');
//console.log(rows.length);
for (var i = 0; i < rows.length; i++) {
elem = rows[i].getElementsByClassName("columns");
var x = parseInt(elem[2].textContent);
var y = parseInt(elem[3].textContent);
// console.log(x+y," ");
console.log(x, " ", y);
var z = y / x;
elem[4].textContent = z;
}
}
<div id="mytable">
<table id="tab1">
<tr class="rows">
<th class="columns">#</th>
<th class="columns">Team</th>
<th class="columns">Matches</th>
<th class="columns">Points</th>
<th class="columns">Coeficiency</th>
</tr>
<tbody>
<tr class="rows">
<td class="columns">1</td>
<td class="columns">Baetasii</td>
<td class="columns">3</td>
<td class="columns">9</td>
<td class="columns">100%</td>
</tr>
<tr class="rows">
<td class="columns">2</td>
<td class="columns">Carcotasii</td>
<td class="columns">2</td>
<td class="columns">5</td>
<td class="columns">100%</td>
</tr>
</tbody>
</table>
</div>
Edit
I thought I'd also include a neater version, it does near enough the same logic stuff, it's more or less just more modern JavaScript syntax, using a more 'functional-style'. Originally I basically copied the exact same style that you provided for the sake of simplicity, but I thought that there's a few issues with that. An example being how you've used a capital letter for the Average, personally I only use a capital letter at the start of a name if it's a class, this is a personal choice however, feel free to disagree or stick to what you know!
I personally prefer using more modern syntax as personally I think is easier to read, it's more clear and concise, generally it looks like less code to read through.
// States if an array like object is empty or not.
const isEmpty = a => a.length > 0;
// Returns the text content of a html object.
const txt = td => td == null ? null : td.textContent;
// Simply updates the UI.
const render = tds => v => tds[4].textContent = parseFloat(v).toFixed(2);
// Works out whether or not to fire update or do nothing.
const compute = tds => isEmpty(tds) ? render(tds)(txt(tds[3]) / txt(tds[2])) : null;
// Gets the average for each tr.
const avg = trs => trs.forEach(tr => compute(tr.querySelectorAll("td")));
// Fire the avg function.
const update = () => avg(document.querySelectorAll("#tab1 tbody tr"));
// Render tr tag.
const renderTr = i => n => m => p => `<tr>
<td>${i}</td><td>${n}</td><td>${m}</td><td>${p}</td><td></td>
</tr>`;
// Add a table row.
const append = () => {
const tbl = document.getElementById("tab1");
const i = document.querySelectorAll("#tab1 tbody tr").length,
n = '_____',
m = Math.floor(Math.random() * 10) + 1,
p = Math.floor(Math.random() * 10) + 1;
// Safe-ish because what's being entered is controlled 100%.
// But generally try not to use innerHTML.
tbl.innerHTML += renderTr(i)(n)(m)(p);
update();
};
// Allow for auto add.
document.getElementById("add").onclick = append;
update(); // Initial run.
<div id="mytable">
<table id="tab1">
<tr class="rows">
<th class="columns">#</th>
<th class="columns">Team</th>
<th class="columns">Matches</th>
<th class="columns">Points</th>
<th class="columns">Coeficiency</th>
</tr>
<tbody>
<tr class="rows">
<td class="columns">1</td>
<td class="columns">Baetasii</td>
<td class="columns">3</td>
<td class="columns">9</td>
<td class="columns">100%</td>
</tr>
<tr class="rows">
<td class="columns">2</td>
<td class="columns">Carcotasii</td>
<td class="columns">2</td>
<td class="columns">5</td>
<td class="columns">100%</td>
</tr>
</tbody>
</table>
</div>
<button id="add">Add Row</button>

Using Object#values Array#forEach #getElementsByTagName
The main issue is that you needed to retrieve the text value with innerText.
You also don't need the redundant class names.
const table = document.getElementById("table");
const rows = table.querySelectorAll("tbody > tr");
Object.values(rows).forEach(row => {
const tds = row.getElementsByTagName('td');
if (tds.length === 5) {
const x = parseInt(tds[2].innerText),
y = parseInt(tds[3].innerText);
const z = y / x;
tds[4].innerText = `${z}`;
}
});
<table id="table">
<tr>
<th>#</th>
<th>Team</th>
<th>Matches</th>
<th>Points</th>
<th>Coeficiency</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>Baetasii</td>
<td>3</td>
<td>9</td>
<td>100%</td>
</tr>
<tr>
<td>2</td>
<td>Carcotasii</td>
<td>2</td>
<td>5</td>
<td>100%</td>
</tr>
</tbody>
</table>

getElementsByClassName returns an array-like object of all child elements which have all of the given class names.
Since we have a collection of DOM elements, elem[2] it's a DOM element and you should access its textContent property.
Also, you're using innerHTML property in a wrong way. Just replace
elem[4].innerHTML(z);
to
elem[4].innerHTML = z;
Average();
function Average() {
var table = document.getElementById('tab1'),
rows = table.getElementsByTagName('tbody')[1].getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
elem = rows[i].getElementsByClassName("columns");
var x = parseInt(elem[2].textContent);
var y = parseInt(elem[3].textContent);
console.log(x, " ", y);
var z = y / x;
elem[4].innerHTML = z;
}
}
<div id="mytable">
<table id="tab1">
<tr class="rows">
<th class="columns">#</th>
<th class="columns">Team</th>
<th class="columns">Matches</ht>
<th class="columns">Points</th>
<th class="columns">Coeficiency</th>
<tbody>
<tr class="rows">
<td class="columns">1</td>
<td class="columns">Baetasii</td>
<td class="columns">3</td>
<td class="columns">9</td>
<td class="columns">100%</td>
</tr>
<tr class="rows">
<td class="columns">2</td>
<td class="columns">Carcotasii</td>
<td class="columns">2</td>
<td class="columns">5</td>
<td class="columns">100%</td>
</tr>
</tbody>
</table>
</div>

dataTables.js not resizing properly. Table overflows window still

I am using dataTables.js from https://datatables.net/ I am also using their responsive extension , but I can not get the table to properly responsively resize. Any insight would be grand.
The table overflows the window.
If you expand it all the way out so all the columns are shown, it doesn't even start hiding columns until the 3rd column is off screen
I have created a jsfiddle with my code.
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#Table_Assets tfoot th').each(function() {
var title = $('#Table_Assets thead th').eq($(this).index()).text();
$(this).html('<input type="text" style="max-width:80px;" />');
});
// DataTable
var table = $('#Table_Assets').DataTable({
responsive: true,
"autoWidth": false,
"order": [
[13, "desc"]
],
initComplete: function() {
var r = $('#Table_Assets tfoot tr');
r.find('th').each(function() {
$(this).css('padding', 8);
});
$('#Table_Assets thead').append(r);
$('#search_0').css('text-align', 'center');
},
});
$('#Table_Assets').resize()
// Apply the search
table.columns().every(function() {
var that = this;
$('input', this.footer()).on('keyup change', function() {
that.search(this.value)
.draw();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js" type="text/javascript"></script>
<link href="https://cdn.datatables.net/responsive/1.0.6/css/dataTables.responsive.css" rel="stylesheet">
<script src="https://cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.js" type="text/javascript"></script>
<div style="max-width:100%; margin-left:auto; margin-right:auto; background-color:#c4bcbc; border-radius:15px; padding:10px; color:black" class="center">
<table id="Table_Assets" class="outerroundedborder dt-responsive" style="width:auto; margin-bottom: 15px; margin-left:auto; margin-right:auto">
<thead>
<tr style="white-space:nowrap;">
<th scope="col">Name:</th>
<th scope="col">Type:</th>
<th scope="col">Manufacturer</th>
<th scope="col">Supplier</th>
<th scope="col">Quantity</th>
<th scope="col">Serial Number</th>
<th scope="col">Location:</th>
<th scope="col">Comments</th>
<th scope="col">Computer Name</th>
<th scope="col">Room Number</th>
<th scope="col">Active</th>
<th scope="col">Tech Fee</th>
<th scope="col">Specifications</th>
<th scope="col">Deploy Date</th>
<th scope="col">User</th>
<th scope="col">Department</th>
<th scope="col">Building</th>
<th scope="col">Tickets</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:auto;">Doom DOOM!</td>
<td>Laptop</td>
<td>HP</td>
<td>none</td>
<td>33</td>
<td>sdfg</td>
<td>sdfg</td>
<td>dfhgdfh</td>
<td>Nebulus</td>
<td>2345</td>
<td>True</td>
<td>True</td>
<td>Stuff from space</td>
<td>5/30/2015</td>
<td>Michaels | Joey</td>
<td>Staff</td>
<td></td>
<td>
<br />
<div class="grey">No tickets found</div>
</td>
</tr>
<tr>
<td style="width:auto;">Dr. Von Doom</td>
<td>Laptop</td>
<td>HP</td>
<td>none</td>
<td>0</td>
<td>123412341234</td>
<td>Dr. Doom's Lair</td>
<td></td>
<td>Spiderman</td>
<td>42</td>
<td>True</td>
<td></td>
<td>Spidey sense is tingling. ^_^</td>
<td>6/18/2015</td>
<td>Michaels | Joey</td>
<td>Staff</td>
<td>AIC Faculty</td>
<td>
<br />
<div class="grey">No tickets found</div>
</td>
</tr>
</tbody>
<tfoot>
<tr class="sortbottom">
<th scope="col">Name:</th>
<th scope="col">Type:</th>
<th scope="col">Manufacturer</th>
<th scope="col">Supplier</th>
<th scope="col">Quantity</th>
<th scope="col">Serial Number</th>
<th scope="col">Location:</th>
<th scope="col">Comments</th>
<th scope="col">Computer Name</th>
<th scope="col">Room Number</th>
<th scope="col">Active</th>
<th scope="col">Tech Fee</th>
<th scope="col">Specifications</th>
<th scope="col">Deploy Date</th>
<th scope="col">User</th>
<th scope="col">Department</th>
<th scope="col">Building</th>
<th scope="col">Tickets</th>
</tr>
</tfoot>
</table>
</div>

I have the same issue, I'm using the jquery DataTables 1.10.7 and the extension Responsive 1.0.6, I solved by adding a line in the "dataTables.responsive.js" in the _resize function, about line 560.
Add the next line at the end of the function:
$(dt.table().node()).removeAttr('style');
That should work.
The function most look like this:
_resize: function() {
var dt = this.s.dt;
var width = $(window).width();
var breakpoints = this.c.breakpoints;
var breakpoint = breakpoints[0].name;
var columns = this.s.columns;
var i, ien;
// Determine what breakpoint we are currently at
for (i = breakpoints.length - 1; i >= 0; i--) {
if (width <= breakpoints[i].width) {
breakpoint = breakpoints[i].name;
break;
}
}
// Show the columns for that break point
var columnsVis = this._columnsVisiblity(breakpoint);
// Set the class before the column visibility is changed so event
// listeners know what the state is. Need to determine if there are
// any columns that are not visible but can be shown
var collapsedClass = false;
for (i = 0, ien = columns.length; i < ien; i++) {
if (columnsVis[i] === false && !columns[i].never) {
collapsedClass = true;
break;
}
}
$(dt.table().node()).toggleClass('collapsed', collapsedClass);
dt.columns().eq(0).each(function(colIdx, i) {
dt.column(colIdx).visible(columnsVis[i]);
});
$(dt.table().node()).removeAttr('style');
},
Best regards.

Grid, Selecting Header_Id from one and Content values from another table and pushing "value with Id" in Array Jquery

what i have is a grid, that is formed with combination of two tables. One section contain Header contents and other values added by user. Below is problem statment.
I have a div inside which a table resides. That make Header of the grid.
Another div having table in it. That contain rows for values.
Demonstration:
<div class="k-grid-header-wrap">
<table role="grid" id="Header" cellspacing="0">
<thead>
<tr>
<th class="k-header" role="columnheader" data-field="ColumnID_20_17_47" data-title="Q1">Q1</th>
<th class="k-header" role="columnheader" data-field="ColumnID_20_17_48" data-title="Q2">Q2</th>
<th class="k-header" role="columnheader" data-field="ColumnID_20_17_10048" data-title="Q3">Q3</th>
<th class="k-header" role="columnheader" data-field="ColumnID_20_17_10049" data-title="Q4">Q4</th>
<th class="k-header" role="columnheader" data-field="ColumnID_20_17_10050" data-title="Q5">Q5</th>
<th class="k-header" role="columnheader" data-field="ColumnID_20_17_10051" data-title="Q7">Q7</th>
<th class="k-header" role="columnheader" data-field="ColumnID_20_17_10052" data-title="Q8">Q8</th>
<th class="k-header" role="columnheader" data-field="ColumnID_20_17_10053" data-title="Q9">Q9</th>
<th class="k-header"></th>
</tr>
</thead>
</table>
</div>
<div style="height: 260px;" class="k-grid-content">
<table role="grid" id="tbl_1" cellspacing="0">
<tbody>
<tr class="" data-uid="a692c39b" role="row">
<td data-role="editable" class="" role="gridcell">1 </td>
<td data-role="editable" class="" role="gridcell">2</td>
<td data-role="editable" class="" role="gridcell">3</td>
<td data-role="editable" class="" role="gridcell">4</td>
<td data-role="editable" class="" role="gridcell">5</td>
<td data-role="editable" class="" role="gridcell">6</td>
<td data-role="editable" class="" role="gridcell">7</td>
<td data-role="editable" class="" role="gridcell">eight</td>
</tr>
</tbody>
</table>
</div>
Now what i want to do is against every row user enter in grid i want to push every grid cell values with ID to another table.
So forth what i have is:
function OnSave() {
var answerArray = [];
$("th[data-field*='_']").each(function () {
var Columnid = $(this).attr('data-field');
var Columntemp = Columnid.split('_');
var ColumnSection = Columntemp[1];
var ColumnQGroup = Columntemp[2];
var ColumnQuestion = Columntemp[3];
var ColumnRadiostatus = $(this).is(':checked');
var rowNum = $(this).parent().parent().index();
var ColumnValue;
$("#div1 table tbody tr").map(function (index, elem) {
// $('td', this).each(function () {
var tmp = $(this).find('td');
ColumnValue = $(tmp).val() || $(tmp).text();
if (!(ColumnValue instanceof Array))
{
ColumnValue = [ColumnValue];
}
answerArray.push(new clientAnswer(ColumnSection, ColumnQGroup, ColumnQuestion, ColumnRadiostatus, ColumnValue, rowNum));
//});
});
});
var serializedAnswers = Sys.Serialization.JavaScriptSerializer.serialize(answerArray);
PageMethods.UpdateAnswers(serializedAnswers, callBackUpdateAnswers);
}
function callBackUpdateAnswers(result) {
alert(result);
if (result == 'false') {
return false;
}
}
Which return whole row against every question.
Expected Output answerArray(20, 17, Q1, 1);
What's Now: answerArray(20, 17, Q1, 123456789);
Any Help would be appreciated. Regards

Following is solution for your issue:
function OnSave() {
var answerArray = [];
$("#Header th[data-field*='_']").each(function () {
var Columnid = $(this).attr('data-field');
var Columntemp = Columnid.split('_');
var ColumnSection = Columntemp[1];
var ColumnQGroup = Columntemp[2];
var ColumnQuestion = Columntemp[3];
var ColumnRadiostatus = $(this).is(':checked');
var rowNum = $(this).parent().parent().index();
var ColumnValue;
ColumnValue = $('#tbl_1 tr:eq(' + $(this).parent().index() + ') td:eq(' + $(this).index() + ')').text();
//alert("columnValue : " + ColumnValue);
if (!(ColumnValue instanceof Array)) {
ColumnValue = [ColumnValue];
}
answerArray.push(new clientAnswer(ColumnSection, ColumnQGroup, ColumnQuestion, ColumnRadiostatus, ColumnValue, rowNum));
});
var serializedAnswers = Sys.Serialization.JavaScriptSerializer.serialize(answerArray);
PageMethods.UpdateAnswers(serializedAnswers, callBackUpdateAnswers);
}
See Demo Here:
View Demo