Pagination in jQuery DataTable not working - javascript

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>

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>

How to prevent clicking on header column

How to prevent click event in a header column.
HTML:
<table>
<tr>
<th class="column">Header</th>
</tr>
<tr>
<td class="column">Body 1</td>
</tr>
<tr>
<td class="column">Body 2</td>
</tr>
<tr>
<td class="column">Body 3</td>
</tr>
</table>
And my script
$('.column:not("th")').on('click', function(){
alert("test");
});

Why not:
$('td.column').on('click', function(){
alert("test");
});

Add tbody selector on you code
$('tbody .column').on('click', function() {
alert("test");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th class="column">thead</th>
</tr>
<tr>
<th class="column">thead Body 1</th>
</tr>
<tr>
<th class="column">thead Body 2</th>
</tr>
<tr>
<th class="column">thead Body 3</th>
</tr>
</thead>
<tr>
<td class="column">Header</td>
</tr>
<tr>
<td class="column">Body 1</td>
</tr>
<tr>
<td class="column">Body 2</td>
</tr>
<tr>
<td class="column">Body 3</td>
</tr>
</table>

Get the running balance of several tables with JQuery

I have several tables with the same structure. It has different values for the price. I want to get the running balance of the price column. So I want to get the sum and print each iteration in the running balance column. For example. In the Price column I have 400, 425 and 350 so in the running balance column, I should have 400, 825, 1175. Currently, I'm only getting the sum.
Here is my html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bacon</td>
<td class="price">1300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Pancakes</td>
<td class="price">300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
<br>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fries</td>
<td class="price">400</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Nuggets</td>
<td class="price">425</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Ice Cream</td>
<td class="price">350</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
here is my javascript
$('.runningBal').each(function() {
var sum = 0;
$(this).parents('table').find('.price').each(function() {
var floted = parseFloat($(this).text());
if (!isNaN(floted)) sum += floted;
$('.runningBal').html(sum);
})
//$(this).html(sum);
});
Here is the fiddle

Well people in the comments are right to say that if the product prices are constant, you should render it server-side while you loop.
Anyway, this will do the job :
$("table").each(function() {
var sum = 0;
$(this).find(".runningBal").each(function() {
sum += +$(this).prev(".price").text();
$(this).text(sum);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bacon</td>
<td class="price">1300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Pancakes</td>
<td class="price">300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
<br>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fries</td>
<td class="price">400</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Nuggets</td>
<td class="price">425</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Ice Cream</td>
<td class="price">350</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></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.

data-maintain-selected="true" not working

<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>

Categories