data-maintain-selected="true" not working - javascript

<table id="table-manage-data-import-conflicts" data-classes="table table-hover table-condensed" data-cache="false" data-pagination="true" data-page-size="50" data-search="true" data-click-to-select="true" data-maintain-selected="true">
<thead>
<tr>
<th data-field="id" data-visible="false"></th>
<th data-field="recommendationPlacements" data-visible="false"></th>
<th data-field="rules" data-visible="false"></th>
<th data-field="isSelected" data-checkbox="true" data-formatter="BusinessPortal.Manage.DataImportConflicts.formatTableCheckBoxColumn"></th>
<th data-field="name" data-switchable="false" data-sortable="true">Name</th>
<th data-field="description" data-switchable="false" data-formatter="BusinessPortal.Manage.DataImportConflicts.formatTableDescriptionColumn" data-events="BusinessPortal.Manage.DataImportConflicts.handleTableDescriptionColumnEvents">Description</th>
</tr>
</thead>
</table>
I'm using bootstrap version 1.9.1. I want to keep the checked items with pagination
data-maintain-selected="true".
But it won't work. Can someone please help out with this?


isn't this related to pagination server/client side?
i don't know if it helps you but, bellow is my code and is working with data-maintain-selected:"true"
<table id="example"
data-toggle="table"
data-search="true"
data-filter-control="true"
data-sort-name="Glider"
data-show-refresh="true"
data-sort-order="asc"
data-show-export="true"
data-click-to-select="true"
data-maintain-selected="true"
data-show-toggle="true"
data-show-columns="true"
data-pagination="true"
data-filter-control="true"
cellspacing="0">
<thead>
<tr>
<th data-field="1" data-field="state" data-checkbox="true"></th>
<th data-field="Glider" data-filter-control="input" data-sortable="true">Glider</th>
<th data-sortable="true" data-align="center" data-valign="middle" data-toggle="tooltip" data-placement="bottom" >A dist<i class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right" title="Average distance for all the flights made with the selected glider"></i></th>
<th data-sortable="true">Pilots</th>
</tr>
</thead>
<tbody>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name1</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name2</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name3</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name3</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name4</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name4</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name5</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name5</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name6</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name11221</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name111</td>
<td> 1</b></td>
<td> 2</td>
</tr>
</tbody>
</table>

Related

Javascript - Json from table with "parent" and "childrens" rows

I need to get values (via checkbox selection) from multiple rows of a table to build a json. I have rows considered children belonging to a parent row (class=primary color). The parent row will always be inserted into the json and the selected child rows will be added to this. The json format should look like this:
parentRow{
name: string,
surname: string,
work: string,
country: int,
birthday: string,
hobbyes: string
ChildRows[
ChildRow{
childname: string,
childage: int
},
ChildRow{
childname: string,
childage: int
}
]
};
Also a parent row can contain infinite child rows so I would need something that dynamically insert "ChildRow" objects inside the json.
posting the html i am using:
$(function () {
$(".docRow").on("click", function () {
var parentRow = [];
$("table > tbody > tr").each(function () {
var $tr = $(this);
var $trh = $('tr.table-primary').first();
if ($tr.find(".docRow").is(":checked")) {
parentRow.push({
name: $trh.find(".name").text(),
surname: $trh.find(".surname").text(),
work: $trh.find(".work").text(),
country: $trh.find(".country").text(),
birthday: $trh.find(".birthday").text(),
hobbyes: $trh.find(".hobbyes").text(),
childRows: [{
childRow: {
childname: $tr.find(".childname").text(),
childage: $tr.find(".childage").text(),
}}
]
})
;
}
});
console.clear();
console.log(JSON.stringify(parentRow));
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<table class="table table-sm">
<thead>
<tr>
<th scope="col" style="max-width: 36px;"></th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
<th scope="col">Work</th>
<th scope="col">Country</th>
<th scope="col">Birthday</th>
<th scope="col">Hobbyes</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="name">Mark</td>
<td class="surname">White</td>
<td class="work">Lawyer</td>
<td class="country">USA</td>
<td class="birthday">26/05/1993</td>
<td class="hobbyes">Tennis, Music</td>
</tr>
<tr>
<td><input class="form-check-input doceRow" type="checkbox"></td>
<td class="childname">Laura</td>
<td class="childage">5</td>
<td colspan="4"></td>
</tr>
<tr>
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="childname">Maurice</td>
<td class="childage">10</td>
<td colspan="4"></td>
</tr>
<tr>
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="childname">Bryan</td>
<td class="childage">2</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="name">Patricia</td>
<td class="surname">Mallon</td>
<td class="work">Manager</td>
<td class="country">Germany</td>
<td class="birthday">05/07/1976</td>
<td class="hobbyes">Mode, Cooking, Reading</td>
</tr>
<tr>
<td><input class="form-check-input fileRow" type="checkbox"></td>
<td class="childname">David</td>
<td class="childage">8</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="name">Wuei</td>
<td class="surname">Zong</td>
<td class="work">Marketing</td>
<td class="country">China</td>
<td class="birthday">01/01/1945</td>
<td class="hobbyes">Bricolage, Manual Work, Sleep</td>
</tr>
<tr>
<tr>
<td><input class="form-check-input fileRow" type="checkbox"></td>
<td class="childname">Philips</td>
<td class="childage">12</td>
<td colspan="4"></td>
</tr>
<tr>
<td><input class="form-check-input fileRow" type="checkbox"></td>
<td class="childname">Alice</td>
<td class="childage">22</td>
<td colspan="4"></td>
</tr>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
</body>
</html>

You can loop through only table-primary rows . Then , inside this use nextUntil() to get all trs until next table-primary rows and check if checkbox inside tr are checked or not depending this push your json inside array and pass same to parentRow.
Demo Code :
$(function() {
$(".docRow").on("click", function() {
var parentRow = [];
console.clear()
//loop through only tr.primary row..
$("table > tbody > tr.table-primary").each(function() {
var $tr = $(this);
var child_row = [] //for child..json array
//loop through trs ..until next promary row
$(this).nextUntil('.table-primary').each(function() {
if ($(this).find("input:checkbox").is(":checked")) {
//push values...
child_row.push({
childname: $(this).find(".childname").text(),
childage: parseInt($(this).find(".childage").text()),
})
}
})
if ($tr.find(".docRow").is(":checked")) {
//change to tr = current row..
parentRow.push({
name: $tr.find(".name").text(),
surname: $tr.find(".surname").text(),
work: $tr.find(".work").text(),
country: $tr.find(".country").text(),
birthday: $tr.find(".birthday").text(),
hobbyes: $tr.find(".hobbyes").text(),
childRows: child_row //pass here
});
}
});
console.log(JSON.stringify(parentRow));
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="container">
<table class="table table-sm">
<thead>
<tr>
<th scope="col" style="max-width: 36px;"></th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
<th scope="col">Work</th>
<th scope="col">Country</th>
<th scope="col">Birthday</th>
<th scope="col">Hobbyes</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="name">Mark</td>
<td class="surname">White</td>
<td class="work">Lawyer</td>
<td class="country">USA</td>
<td class="birthday">26/05/1993</td>
<td class="hobbyes">Tennis, Music</td>
</tr>
<tr>
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="childname">Laura</td>
<td class="childage">5</td>
<td colspan="4"></td>
</tr>
<tr>
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="childname">Maurice</td>
<td class="childage">10</td>
<td colspan="4"></td>
</tr>
<tr>
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="childname">Bryan</td>
<td class="childage">2</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="name">Patricia</td>
<td class="surname">Mallon</td>
<td class="work">Manager</td>
<td class="country">Germany</td>
<td class="birthday">05/07/1976</td>
<td class="hobbyes">Mode, Cooking, Reading</td>
</tr>
<tr>
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="childname">David</td>
<td class="childage">8</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="name">Wuei</td>
<td class="surname">Zong</td>
<td class="work">Marketing</td>
<td class="country">China</td>
<td class="birthday">01/01/1945</td>
<td class="hobbyes">Bricolage, Manual Work, Sleep</td>
</tr>
<tr>
<tr>
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="childname">Philips</td>
<td class="childage">12</td>
<td colspan="4"></td>
</tr>
<tr>
<td><input class="form-check-input docRow" type="checkbox"></td>
<td class="childname">Alice</td>
<td class="childage">22</td>
<td colspan="4"></td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

Jquery - Find closest previous <tr> by class at checkbox clicking. the checkbox is inside a <td>

I need to find the previous and closest element (".table-primary") to the td that contain the input ("checkbox").
If i check the checkbox inside the "David" row it should find the "Patricia" row element.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<table class="table table-sm">
<thead>
<tr>
<th scope="col" style="max-width: 36px;"></th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
<th scope="col">Work</th>
<th scope="col">Country</th>
<th scope="col">Birthday</th>
<th scope="col">Hobbyes</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Mark</td>
<td class="surname">White</td>
<td class="work">Lawyer</td>
<td class="country">USA</td>
<td class="birthday">26/05/1993</td>
<td class="hobbyes">Tennis, Music</td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Laura</td>
<td class="childage">5</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Maurice</td>
<td class="childage">10</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Bryan</td>
<td class="childage">2</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Patricia</td>
<td class="surname">Mallon</td>
<td class="work">Manager</td>
<td class="country">Germany</td>
<td class="birthday">05/07/1976</td>
<td class="hobbyes">Mode, Cooking, Reading</td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">David</td>
<td class="childage">8</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Wuei</td>
<td class="surname">Zong</td>
<td class="work">Marketing</td>
<td class="country">China</td>
<td class="birthday">01/01/1945</td>
<td class="hobbyes">Bricolage, Manual Work, Sleep</td>
</tr>
<tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Philips</td>
<td class="childage">12</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Alice</td>
<td class="childage">22</td>
<td colspan="4"></td>
</tr>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
</body>
</html>
I have already tried using closest() e prev(). But it doesn't seem to work, I don't understand why.

You can use .prevAll() to do that:
$(document).on('change', '.form-check-input', function() {
console.log($(this).closest('tr').prevAll('.table-primary').first().text())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table class="table table-sm">
<thead>
<tr>
<th scope="col" style="max-width: 36px;"></th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
<th scope="col">Work</th>
<th scope="col">Country</th>
<th scope="col">Birthday</th>
<th scope="col">Hobbyes</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Mark</td>
<td class="surname">White</td>
<td class="work">Lawyer</td>
<td class="country">USA</td>
<td class="birthday">26/05/1993</td>
<td class="hobbyes">Tennis, Music</td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Laura</td>
<td class="childage">5</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Maurice</td>
<td class="childage">10</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Bryan</td>
<td class="childage">2</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Patricia</td>
<td class="surname">Mallon</td>
<td class="work">Manager</td>
<td class="country">Germany</td>
<td class="birthday">05/07/1976</td>
<td class="hobbyes">Mode, Cooking, Reading</td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">David</td>
<td class="childage">8</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Wuei</td>
<td class="surname">Zong</td>
<td class="work">Marketing</td>
<td class="country">China</td>
<td class="birthday">01/01/1945</td>
<td class="hobbyes">Bricolage, Manual Work, Sleep</td>
</tr>
<tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Philips</td>
<td class="childage">12</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Alice</td>
<td class="childage">22</td>
<td colspan="4"></td>
</tr>
</tbody>
</table>
</div>

You need use parent function and after make a loop of prev elements, running the hasClass function for meet the condition and after access to name class.
$("input[type='checkbox']").click(function(){
if($(this).is(":checked") && $(this).parent().parent().parent().is("tbody")){
let p = $(this).parent().parent();
while(!$(p).hasClass("table-primary")){
p = $(p).prev();
}
console.log($(p).children(".name").text());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table class="table table-sm">
<thead>
<tr>
<th scope="col" style="max-width: 36px;"></th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
<th scope="col">Work</th>
<th scope="col">Country</th>
<th scope="col">Birthday</th>
<th scope="col">Hobbyes</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Mark</td>
<td class="surname">White</td>
<td class="work">Lawyer</td>
<td class="country">USA</td>
<td class="birthday">26/05/1993</td>
<td class="hobbyes">Tennis, Music</td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Laura</td>
<td class="childage">5</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Maurice</td>
<td class="childage">10</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Bryan</td>
<td class="childage">2</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Patricia</td>
<td class="surname">Mallon</td>
<td class="work">Manager</td>
<td class="country">Germany</td>
<td class="birthday">05/07/1976</td>
<td class="hobbyes">Mode, Cooking, Reading</td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">David</td>
<td class="childage">8</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Wuei</td>
<td class="surname">Zong</td>
<td class="work">Marketing</td>
<td class="country">China</td>
<td class="birthday">01/01/1945</td>
<td class="hobbyes">Bricolage, Manual Work, Sleep</td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Philips</td>
<td class="childage">12</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Alice</td>
<td class="childage">22</td>
<td colspan="4"></td>
</tr>
</tbody>
</table>
</div>

Copy Paste multiple rows from CSV to input fields in an HTML Form

I am trying to copy paste data from a CSV file to an HTML form using Jquery. My form has an array of input fields so I can do multiple inserts at the same time on submit
Now, suppose I copy paste multiple rows from a CSV file to the second column of the first row in the form, the first row of the form shows data correctly but in the second row, the data pasted starts from the first column itself, wherein it should start from the second row as it did on the first row of the form
CSV rows and cells
1 4 a
2 5 b
3 6 c
Screenshot
function csv_paste_datagrid(event){
$(document).ready(function() {
$('input').bind('paste', null, function (e) {
$this = $(this);
setTimeout(function () {
var columns = $this.val().split(/\s+/);
var i;
var input = $this;
for (i = 0; i < columns.length; i++) {
input.val(columns[i]);
if( i % 3 !== 2){
input = input.parent().parent().parent().parent().parent().next().find('input');
} else{
input = input.parent().parent().parent().parent().parent().parent().next().find('input').first();
}
}
}, 0);
});
});
HTML
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
<table style="display : inline;width : 100%;"></table>
<table id="" class="system_form_tables_parent">
<tbody>
<tr>
<th></th>
<td>
<table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td style=" " id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[0]" style="">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[0]" style="">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[0]" style="">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style=" " id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[1]" style="">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[1]" style="">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[1]" style="">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="">
<td style="text-align : left;padding-left:0.5em">
<table id="submit_table">
<tbody>
<tr>
<td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" style="" value="Back" onclick="" title="Back">
<input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" style="" value="Reset" title="Reset">
<input type="button" class="common_button" id="submit" name="system_validations_submit" onclick="" style="" value="Submit" title="Submit">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>

Right, I had to clear a few double ids from your HTML first and also added a class attribute (contTD) to your "main" container <td>s. After that the whole thing fell into place fairly easily:
to prevent the actual TSV text from being pasted directly into the first input field I used e.preventDefault()
I then used .split() twice on the TSV string to turn it into the 2D array vals
I identified the .closest() td.contTD element (--> td) and its column and row numbers (col and row) by finding the .index() of td and its parent row.
starting form the .closest('tbody')I then worked my way down again through the .slice()of rows starting with row and its (sliced) child input elements starting at column col.
in an .each() loop I then assigned the value of the vals-array to the input element, but only if val[i][j] exists!
There could be further improvements to the script, as it will run trhough all <tr>s of the table from row row to the end. But I hope this is a starting point for you and has given you a few more ideas on how to work with jquery.
In my script I used a delegated paste-event-binding to the <form> element. This should work well with a dynamic table. I did not pack it into an extra function. But, of course, when you use it in your site it should be placed in your onload section.
And lastly: in my second .split() I am looking for a tab character as column separator, so this example will work with a TSV file format. If you want to apply it on space or comma separated values you should adapt the regular expression there to something like /\s/ or /,/ .
$('form').on('paste', 'input', function (e) {
e.preventDefault(); // do not paste the contents into the first cell ...
// convert TSV from clipboard into a 2D array:
let vals=event.clipboardData.getData('text').trim().split(/\r?\n */).map(r=>r.split(/\t/));
let td=$(this).closest('.contTD'); // closest container TD and work from there
let col=td.index(), row=td.parent().index(), tbdy=td.closest('tbody');
// modify input fields of rows >= row and columns >= col:
tbdy.children('tr').slice(row).each((i,tr)=>{
$(tr).find('td input:text').slice(col).each((j,ti)=>{
if(vals[i]&&vals[i][j]!=null) ti.value=vals[i][j] }
)});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
<label>sample data for copying and pasting via clipboard:</label>
<table>
<tr><td>1</td><td>4</td><td>a</td></tr>
<tr><td>2</td><td>5</td><td>b</td></tr>
<tr><td>3</td><td>6</td><td>c</td></tr>
</table>
<table id="" class="system_form_tables_parent">
<tbody>
<tr>
<th></th>
<td>
<table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td class="contTD"><table>
<tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
<tr><td class="td_class"><input type="text" value="00A"> </td></tr>
<tr><th></th></tr>
<tr><th></th></tr>
<tr><td class="val_error"></td></tr></tbody>
</table></td>
<td class="contTD" id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[0]">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value="01"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[0]">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value="02"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[0]">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value="03"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="contTD"><table>
<tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
<tr><td class="td_class"><input type="text" value="00A"> </td></tr>
<tr><th></th></tr>
<tr><th></th></tr>
<tr><td class="val_error"></td></tr></tbody>
</table></td>
<td class="contTD" id="container_validation_options[1]">
<table>
<tbody>
<tr id="tr_validation_options[1]">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value="04"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_validation_display[1]">
<table>
<tbody>
<tr id="tr_validation_display[1]">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value="05"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_blocked_modules[1]">
<table>
<tbody>
<tr id="tr_blocked_modules[1]">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value="06"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="text-align : left;padding-left:0.5em">
<table id="submit_table">
<tbody>
<tr>
<td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" value="Back" title="Back">
<input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" value="Reset" title="Reset">
<input type="button" class="common_button" id="submit" name="system_validations_submit" value="Submit" title="Submit">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>

Pagination in jQuery DataTable not working

Have been surfing and applying various solutions but the problems just isnt being solved. The dataTable doesnt paginate the table rows
$('#rates_table').DataTable({
stateSave: true,
"dom":'<"top"f>rt<"bottom"p><"clear">',
"lengthChange": true,
"pageLength":10,
"order": [[1, "desc"]]
});
Im using
jQuery.DataTables 1.10.7 and
jQuery v2.1.4
Created a fiddle for it:-
https://jsfiddle.net/zdsL44xp/

Need to add jquery library first and then datatable library and it's css
You given code worked for me:-
$('#customers_table').DataTable({
stateSave: true,
"dom":'<"top"f>rt<"bottom"p><"clear">',
"lengthChange": true,
"pageLength":10,
"order": [[1, "desc"]]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<table id="customers_table" width="100%" class="display table table-striped dataTable no-footer" border="0" cellpadding="5" role="grid" style="width: 100%;">
<thead>
<tr class="header" role="row">
<th align="left" class="sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 36px;"><input type="checkbox" class="checkall" name="item"></th>
<th align="left" class="sorting_asc" tabindex="0" aria-controls="customers_table" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Full Name: activate to sort column descending" style="width: 219px;">Full Name</th>
<th align="center" class="sorting" tabindex="0" aria-controls="customers_table" rowspan="1" colspan="1" aria-label="Email Address: activate to sort column ascending" style="width: 212px;">Email Address</th>
<th align="left" class="sorting" tabindex="0" aria-controls="customers_table" rowspan="1" colspan="1" aria-label="Phone: activate to sort column ascending" style="width: 111px;">Phone</th>
<th align="left" class="sorting" tabindex="0" aria-controls="customers_table" rowspan="1" colspan="1" aria-label="Policies: activate to sort column ascending" style="width: 83px;">Policies</th>
<th align="left" class="sorting" tabindex="0" aria-controls="customers_table" rowspan="1" colspan="1" aria-label="Quotes: activate to sort column ascending" style="width: 80px;">Quotes</th>
<th align="left" class="sorting" tabindex="0" aria-controls="customers_table" rowspan="1" colspan="1" aria-label="Date of Registration: activate to sort column ascending" style="width: 192px;">Date of Registration</th>
</tr>
</thead>
<tbody>
<tr id="3" class="odd" align="left" role="row">
<td><input type="checkbox" class="chkitem" value="[{"function":"delete","params":"3,Betrand Bella Start,winchestaer#gmail.com"}]" name="item[]"></td>
<td class="sorting_1">Betrand Bella Start</td>
<td>winchestaer#gmail.com</td>
<td>00238482734</td>
<td>2</td>
<td>3</td>
<td>25 Mar 17</td>
</tr>
<tr id="5" class="even" align="left" role="row">
<td><input type="checkbox" class="chkitem" value="[{"function":"delete","params":"5,Muchiri Stanley N. Muchiri,sngumo#gmail.com"}]" name="item[]"></td>
<td class="sorting_1">Muchiri Stanley N. Muchiri</td>
<td>sngumo#gmail.com</td>
<td>722958720</td>
<td>1</td>
<td>1</td>
<td>04 Apr 17</td>
</tr>
<tr id="2" class="odd" align="left" role="row">
<td><input type="checkbox" class="chkitem" value="[{"function":"delete","params":"2,Okore Jumbe More,okore#gmail.com"}]" name="item[]"></td>
<td class="sorting_1">Okore Jumbe More</td>
<td>okore#gmail.com</td>
<td>072438934</td>
<td>0</td>
<td>1</td>
<td>24 Mar 17</td>
</tr>
<tr id="4" class="even" align="left" role="row">
<td><input type="checkbox" class="chkitem" value="[{"function":"delete","params":"4,Rude Bwoyi,TRENDA45#YAHOO.COM"}]" name="item[]"></td>
<td class="sorting_1">Rude Bwoyi</td>
<td>TRENDA45#YAHOO.COM</td>
<td>5434534</td>
<td>0</td>
<td>1</td>
<td>24 Mar 17</td>
</tr>
<tr id="1" class="odd" align="left" role="row">
<td><input type="checkbox" class="chkitem" value="[{"function":"delete","params":"1,Samuel Bepari Jones,samuelstar#gmail.com"}]" name="item[]"></td>
<td class="sorting_1">Samuel Bepari Jones</td>
<td>samuelstar#gmail.com</td>
<td>0743294283</td>
<td>0</td>
<td>3</td>
<td>24 Mar 17</td>
</tr>
<tr id="12" class="odd" align="left" role="row">
<td><input type="checkbox" class="chkitem" value="[{"function":"delete","params":"1,Samuel Bepari Jones,samuelstar#gmail.com"}]" name="item[]"></td>
<td class="sorting_1">Samuel Bepari Jones</td>
<td>samuelstar#gmail.com</td>
<td>0743294283</td>
<td>0</td>
<td>3</td>
<td>24 Mar 17</td>
</tr>
<tr id="9" class="odd" align="left" role="row">
<td><input type="checkbox" class="chkitem" value="[{"function":"delete","params":"1,Samuel Bepari Jones,samuelstar#gmail.com"}]" name="item[]"></td>
<td class="sorting_1">Samuel Bepari Jones</td>
<td>samuelstar#gmail.com</td>
<td>0743294283</td>
<td>0</td>
<td>3</td>
<td>24 Mar 17</td>
</tr>
<tr id="6" class="odd" align="left" role="row">
<td><input type="checkbox" class="chkitem" value="[{"function":"delete","params":"1,Samuel Bepari Jones,samuelstar#gmail.com"}]" name="item[]"></td>
<td class="sorting_1">Samuel Bepari Jones</td>
<td>samuelstar#gmail.com</td>
<td>0743294283</td>
<td>0</td>
<td>3</td>
<td>24 Mar 17</td>
</tr>
<tr id="7" class="odd" align="left" role="row">
<td><input type="checkbox" class="chkitem" value="[{"function":"delete","params":"1,Samuel Bepari Jones,samuelstar#gmail.com"}]" name="item[]"></td>
<td class="sorting_1">Samuel Bepari Jones</td>
<td>samuelstar#gmail.com</td>
<td>0743294283</td>
<td>0</td>
<td>3</td>
<td>24 Mar 17</td>
</tr>
<tr id="10" class="odd" align="left" role="row">
<td><input type="checkbox" class="chkitem" value="[{"function":"delete","params":"1,Samuel Bepari Jones,samuelstar#gmail.com"}]" name="item[]"></td>
<td class="sorting_1">Samuel Bepari Jones</td>
<td>samuelstar#gmail.com</td>
<td>0743294283</td>
<td>0</td>
<td>3</td>
<td>24 Mar 17</td>
</tr>
<tr id="11" class="odd" align="left" role="row">
<td><input type="checkbox" class="chkitem" value="[{"function":"delete","params":"1,Samuel Bepari Jones,samuelstar#gmail.com"}]" name="item[]"></td>
<td class="sorting_1">Samuel Bepari Jones</td>
<td>samuelstar#gmail.com</td>
<td>0743294283</td>
<td>0</td>
<td>3</td>
<td>24 Mar 17</td>
</tr>
</tbody>
</table>
Note:-
1.he rows count in your data is less than 10, that is also one reason that pagination will not show (but it doesn't mean that it will not work). I have added more data in code to show you that pagination is working
2.#StanleyNgumo you need to first add jQuery library and then data-table library and then your script code. Now if you are adding your script code in header then wrap your code inside $(document).ready(function(){...});. If you are adding the script code at footer then no need of $(document).ready(){...});

Try this data table
add on the top of your page
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
DataTable
var dataTable;
$(document).ready(function() {
dataTable = $('#manufacturer_data').DataTable({
//here's example URL from Codeigniter
"ajax": "<?=base_url()?>manufacturer/manufacturer_list",
});
});
add on the bottom of your page
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

I think it's worth mentioning here that the pagination will only work with a properly formatted table.
For DataTables to be able to enhance an HTML table, the table must be
valid, well formatted HTML, with a header (thead) and a single body
(tbody). An optional footer (tfoot) can also be used.
The table must be structured like this:
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>

Javascript function executed before previous function is done

I have a webpage that contains a couple of tables.
At the beginning it checks the language and sets the corresponding translations.
At the end of the html file (after all the elements are loaded) the translations are set using javascript.
After that variables are requested via wifi.
This is what I see when I load the page.
The elements that don't need translation are shown before set_language_for_raw_data_() is executed.
I have checked Chrome's developer tools and saw this.
It shows that set_language_for_raw_data_() is executed before Raw_Data_Requests(), but it does not show until Raw_Data_Requests() is done.
Is there a way to show the translations before Raw_Data_Requests() is executed?
Raw_data.html:
<!DOCTYPE HTML>
<html>
<head>
<script>
checkLanguage(); //load language setting or use system default
</script>
</head>
<body>
<div id="site_unresponsive">
<div id="inhalt">
<h2 class="middle white_font expander" onclick="expander('raw_data')" id="raw_data_title"></h2>
<ul class="hidden" id="raw_data">
<table cellspacing="0" id="actual_meas">
<tr>
<td id="loading" style="display:none">Error: Connection lost</td>
</tr>
<tr class="odd">
<td></td>
<td id="Meas(0)">..</td>
</tr>
<tr>
<td></td>
<td id="Meas(1)">..</td>
</tr>
<tr class="odd">
<td>Ubat</td>
<td id="Meas(2)">..</td>
</tr>
<tr>
<td>Ibat</td>
<td id="Meas(5)">..</td>
</tr>
<tr class="odd">
<td>U PWM</td>
<td id="Meas(9)">..</td>
</tr>
<tr>
<td style="color:darkorange">LED</td>
<td id="Meas(11)">•</td>
</tr>
<tr class="odd">
<td style="color:green">LED</td>
<td id="Meas(12)">•</td>
</tr>
<tr>
<td></td>
<td id="Meas(19)">..</td>
</tr>
<tr class="odd">
<td></td>
<td id="Meas(20)">..</td>
</tr>
<tr>
<td></td>
<td id="Meas(100)">..</td>
</tr>
</table>
</ul>
<h2 class="middle white_font expander" onclick="expander('version')" id="version_title"></h2>
<div class="hidden" id="version">
<table cellspacing="0" class="data_tab" id="version_details">
<tr>
<th></th>
</tr>
<tr class="odd">
<td id="device_version">~DeviceVersion~</td>
</tr>
</table>
</div>
<h2 class="middle white_font expander" onclick="expander('cumulatives')" id="cumulatives_title"></h2>
<ul class="hidden" id="cumulatives">
<li class="w300">
<table cellspacing="0" id="cuml">
<tr class="odd">
<td></td>
<td>~Cumulatives(0)~</td>
</tr>
<tr>
<td></td>
<td>~Cumulatives(1)~</td>
</tr>
<tr class="odd">
<td></td>
<td>~Cumulatives(2)~</td>
</tr>
<tr>
<td></td>
<td>~Cumulatives(3)~</td>
</tr>
<tr class="odd">
<td></td>
<td>~Cumulatives(4)~</td>
</tr>
<tr>
<td></td>
<td>~Cumulatives(5)~</td>
</tr>
<tr class="odd">
<td></td>
<td>~Cumulatives(6)~</td>
</tr>
<tr>
<td></td>
<td>~Cumulatives(7)~</td>
</tr>
<tr class="odd">
<td></td>
<td>~Cumulatives(8)~</td>
</tr>
<tr>
<td></td>
<td style="white-space:nowrap;">~Cumulatives(14)~</td>
</tr>
</table>
</li>
</ul>
<h2 class="middle white_font expander" onclick="expander('error')" id="error_title"></h2>
<div class="hidden" id="error" style="overflow-x:scroll;overflow-y:hidden;white-space:nowrap;">
<table cellspacing="0" class="data_tab" id="error_history">
<tr>
<th>Nr</th>
<th></th>
<th></th>
<th></th>
<th>U</th>
<th>I</th>
<th>PWM</th>
<th>T</th>
</tr>
<tr class="odd">
<td>1</td>
<td>~ErrorHistory(0,2,0)~</td>
<td>~ErrorHistory(0,3,0)~</td>
<td>~ErrorHistory(0,4,0)~</td>
<td>~ErrorHistory(0,5,0)~</td>
<td>~ErrorHistory(0,6,0)~</td>
<td>~ErrorHistory(0,7,0)~</td>
<td>~ErrorHistory(0,8,0)~</td>
</tr>
<tr>
<td>2</td>
<td>~ErrorHistory(1,2,0)~</td>
<td>~ErrorHistory(1,3,0)~</td>
<td>~ErrorHistory(1,4,0)~</td>
<td>~ErrorHistory(1,5,0)~</td>
<td>~ErrorHistory(1,6,0)~</td>
<td>~ErrorHistory(1,7,0)~</td>
<td>~ErrorHistory(1,8,0)~</td>
</tr>
<tr class="odd">
<td>3</td>
<td>~ErrorHistory(2,2,0)~</td>
<td>~ErrorHistory(2,3,0)~</td>
<td>~ErrorHistory(2,4,0)~</td>
<td>~ErrorHistory(2,5,0)~</td>
<td>~ErrorHistory(2,6,0)~</td>
<td>~ErrorHistory(2,7,0)~</td>
<td>~ErrorHistory(2,8,0)~</td>
</tr>
<tr>
<td>4</td>
<td>~ErrorHistory(3,2,0)~</td>
<td>~ErrorHistory(3,3,0)~</td>
<td>~ErrorHistory(3,4,0)~</td>
<td>~ErrorHistory(3,5,0)~</td>
<td>~ErrorHistory(3,6,0)~</td>
<td>~ErrorHistory(3,7,0)~</td>
<td>~ErrorHistory(3,8,0)~</td>
</tr>
<tr class="odd">
<td>5</td>
<td>~ErrorHistory(4,2,0)~</td>
<td>~ErrorHistory(4,3,0)~</td>
<td>~ErrorHistory(4,4,0)~</td>
<td>~ErrorHistory(4,5,0)~</td>
<td>~ErrorHistory(4,6,0)~</td>
<td>~ErrorHistory(4,7,0)~</td>
<td>~ErrorHistory(4,8,0)~</td>
</tr>
<tr>
<td>6</td>
<td>~ErrorHistory(5,2,0)~</td>
<td>~ErrorHistory(5,3,0)~</td>
<td>~ErrorHistory(5,4,0)~</td>
<td>~ErrorHistory(5,5,0)~</td>
<td>~ErrorHistory(5,6,0)~</td>
<td>~ErrorHistory(5,7,0)~</td>
<td>~ErrorHistory(5,8,0)~</td>
</tr>
<tr class="odd">
<td>7</td>
<td>~ErrorHistory(6,2,0)~</td>
<td>~ErrorHistory(6,3,0)~</td>
<td>~ErrorHistory(6,4,0)~</td>
<td>~ErrorHistory(6,5,0)~</td>
<td>~ErrorHistory(6,6,0)~</td>
<td>~ErrorHistory(6,7,0)~</td>
<td>~ErrorHistory(6,8,0)~</td>
</tr>
<tr>
<td>8</td>
<td>~ErrorHistory(7,2,0)~</td>
<td>~ErrorHistory(7,3,0)~</td>
<td>~ErrorHistory(7,4,0)~</td>
<td>~ErrorHistory(7,5,0)~</td>
<td>~ErrorHistory(7,6,0)~</td>
<td>~ErrorHistory(7,7,0)~</td>
<td>~ErrorHistory(7,8,0)~</td>
</tr>
<tr class="odd">
<td>9</td>
<td>~ErrorHistory(8,2,0)~</td>
<td>~ErrorHistory(8,3,0)~</td>
<td>~ErrorHistory(8,4,0)~</td>
<td>~ErrorHistory(8,5,0)~</td>
<td>~ErrorHistory(8,6,0)~</td>
<td>~ErrorHistory(8,7,0)~</td>
<td>~ErrorHistory(8,8,0)~</td>
</tr>
<tr>
<td>10</td>
<td>~ErrorHistory(9,2,0)~</td>
<td>~ErrorHistory(9,3,0)~</td>
<td>~ErrorHistory(9,4,0)~</td>
<td>~ErrorHistory(9,5,0)~</td>
<td>~ErrorHistory(9,6,0)~</td>
<td>~ErrorHistory(9,7,0)~</td>
<td>~ErrorHistory(9,8,0)~</td>
</tr>
</table>
</div>
<h2 class="middle white_font expander" onclick="expander('cycle')" id="cycle_title"></h2>
<div class="hidden" id="cycle" style="overflow-x:scroll;overflow-y:hidden;white-space:nowrap;">
<table cellspacing="0" class="data_tab" id="cycle_history" style="layout:fixed">
<tr>
<th>Nr</th>
<th>Ah</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tbody id="extended_cycles">
</tbody>
</table>
</div>
<h2 class="middle white_font expander" onclick="expander('error_tab')" id="error_tab_title">EEPROM data</h2>
<div class="hidden" id="error_tab" style="overflow-x:scroll;overflow-y:hidden;white-space:nowrap;">
<table cellspacing="0" class="data_tab" id="eeprom_data">
<tr>
<td>00: ~EEPROM(0)~</td>
</tr>
<tr>
<td>10: ~EEPROM(1)~</td>
</tr>
<tr>
<td>20: ~EEPROM(2)~</td>
</tr>
<tr>
<td>30: ~EEPROM(3)~</td>
</tr>
<tr>
<td>40: ~EEPROM(4)~</td>
</tr>
<tr>
<td>50: ~EEPROM(5)~</td>
</tr>
<tr>
<td>60: ~EEPROM(6)~</td>
</tr>
<tr>
<td>70: ~EEPROM(7)~</td>
</tr>
<tr>
<td>80: ~EEPROM(8)~</td>
</tr>
<tr>
<td>90: ~EEPROM(9)~</td>
</tr>
<tr>
<td>A0: ~EEPROM(10)~</td>
</tr>
<tr>
<td>B0: ~EEPROM(11)~</td>
</tr>
<tr>
<td>C0: ~EEPROM(12)~</td>
</tr>
<tr>
<td>D0: ~EEPROM(13)~</td>
</tr>
<tr>
<td>E0: ~EEPROM(14)~</td>
</tr>
<tr>
<td>F0: ~EEPROM(15)~</td>
</tr>
</table>
</div>
<br>
</div>
<script>
set_language_for_raw_data_();
Raw_Data_Requests();
</script>
</div>
</body>
</html>
set_language_for_raw_data_():
document.getElementById("menu_title").innerHTML = d12;
document.getElementById("raw_data_title").innerHTML = t5;
document.getElementById("version_title").innerHTML = t7;
document.getElementById("cumulatives_title").innerHTML = t8;
document.getElementById("error_title").innerHTML = t9;
document.getElementById("cycle_title").innerHTML = t11;
checkLanguage():
language = getCookie("language");
if (language == "")
applySystemLanguage();
setTranslations(language);
setTranslations(language):
switch (language){
default:
case "en":
d12="Show RAW data";
t5="Real time measurements";
t7="Version";
t8="Cumulatives";
t9="Error history";
t11="Cycle history";
break;
}

With rxjs you can do someting like
set_language_for_raw_data_(){
//Your code
return Observable.of(language );
}
set_language_for_raw_data_().subscribe(() => Raw_Data_Requests());
Here, you wait until the set_language_for_raw_data_ returns an observable. You can then subscribe on it. From the moment the observable is completed, it will call the next function.
The complete explanation you can find on http://reactivex.io/, But take some time and check how Observables are working

What I did to make the translations show was add a timeout:
set_language_for_raw_data_();
setTimeout(function(){
Raw_Data_Requests();
}, 20);
Apparently this was enough time for the html to be shown/updated.

Categories