Populate Table in jQuery Mobile - javascript

I am using fooTable jQuery plugin as date grid in jQuery mobile. I have list of data I need to populate in the table. Initially with filtering and cell formatting. First I want to populate data in the table. I am using an external .js file to keep JavaScript separately.
HTML5 code, "$.App.initGridView" is not calling from "data-init" tag. Why isn't it working?
<div data-role="view" data-title="Platform" onloadeddata="$.App.initGridView" data-init="$.App.initGridView">
<table class="footable table" id="my-table">
<thead >
<tr data-theme="b">
<th >Ticket#</th>
<th >Date</th>
<th data-hide="phone">Operator Name</th>
<th data-hide="phone">Lease Name</abbr></th>
<th >Tank#</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
jQuery Code:
initGridView: function () {
var rtList = $.App.tempDB.getTicketList();
// I want to populate table here
}

Related

insert HTML into bootstrap-table (wenzhixin) build a progress bar

I have a table generated using the table from data method with bootstrap tables.
Is there any way I can get html inserted into the cell from my json data array
html:
<table
id="bootstrap-table"
data-pagination="true"
data-show-export="true"
>
<thead>
<tr>
<th data-field="id" data-switchable="false">Delivery #</th>
<th data-field="created_at" data-sortable="true">Created</th>
<th data-field="progress" data-sortable="true">Progress</th>
</tr>
</thead>
</table>
js:
//bs-table options
$table.bootstrapTable({
data: dataJson,
});
My aim is to inject the following HTML into the progress data-field while somehow using the percentage value in there to set the progress bar width.
<div class="progress">
<div class="progress-bar" style="width:100%"></div>
</div>
Alternatively, any other suggestions on how to get a progress bar into my table would be much appreciated!
So it turns out that any code that is included in the JSON renders as HTML... so quite simple to get this working! i.e.
{
"id":460000000,
"progress":"<div class=\"progress progress-margin\"><div class=\"progress-bar\" style=\"width:61%\"><\/div><\/div>"
}

removing and re-populating boostrapTable

I want basically to refresh the data held in a table. First instantiation works just fine, but no luck after removing and re-fetching of the data.
html
<table id="tablePendByOrg" class="table table-bordered table-hover table-condensed table-striped">
<thead>
<tr>
<th data-field="Date">Time</th>
<th data-field="Organization">Org</th>
<th data-field="f24hs"><24Hs</th>
<th data-field="f48Hs"><48Hs</th>
<th data-field="f48Hs">>48Hs</th>
<th data-field="fTotal">Total</th>
</tr>
</thead>
</table>
js to populate after ajax call.
$('#tablePendByOrg').bootstrapTable({
data: d.Table
});
js to remove data
$("#tablePendByOrg tbody tr").remove();
And after a new call to the ajax code, I get the proper data in d.Table but no tbody are showing on the page, just the framed th that I set from the get go.
As they describe:
$table = $('#tablePendByOrg');
$table.bootstrapTable('load', data); // removes old data, no need to remove it by yourself
also the removal o all items is not to be done as you did:
$("#tablePendByOrg tbody tr").remove();
use:
$table.bootstrapTable('removeAll');

How to click on table row and open another table below table to show DB query result as content using JQuery and JS or Ajax?

i have a table with dynamic content coming from an Oracle Database, based on each row there is suppose to be another information coming from the Database on click event i.e. click on row with ID 1 and this executes an Ajax call with an query condition including the ID 1 than response should be shown in another table below the "basic" table.
I think i have to use something like:
$('.table > tbody > tr').click(function() {
// row was clicked
});
But i am not sure, since I want to use a PHP call to the DB, but the UX should be instantaneously like an Ajax action without loading the entire page.
The question:
How do I a make the table row clickable (possibly with that JS?)?
How do I parse the value from the row as condition as database call?
Ajax/PHP?
How do I handover the values into the second table?
Below is my code so far:
function show(nr) {
document.getElementById("table1").style.display="none";
document.getElementById("table2").style.display="none";
document.getElementById("table3").style.display="none";
document.getElementById("table4").style.display="none";
document.getElementById("table"+nr).style.display="block";
}
#table1, #table2, #table3, #table4 {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-sm table-hover">
<tr>
<th onclick='show(1);'>ID</th>
<th>Name</th>
<th>Status</th>
</tr>
<tr>
<td>1</td>
<td>Peter Pan</td>
<td>Expected</td>
</tr>
<tr>
<td>3</td>
<td>Julia Spencer</td>
<td>Expected</td>
</tr>
</table>
<div id="table1">
<table class="table table-sm table-hover">
<tr>
<th>ID</th>
<th>Name</th>
<th>Status</th>
</tr>
<tr>
<td>1</td>
<td>Peter Pan</td>
<td>Expected</td>
</tr>
<tr>
<td>3</td>
<td>Julia Spencer</td>
<td>Expected</td>
</tr>
</table>
</div>

Fetch table row data as per the selected checkbox

I am using Material Design Lite to create a table and I am inserting rows dynamically using php.
The material design lite has provided checkboxes for each row. Now, I want to use the selected row's data on a button click. Does anyone have any idea how to do that?
Here is the code :
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp" id="sanctionedTable">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Name</th>
<th class="mdl-data-table__cell--non-numeric">Registration No.</th>
<th class="mdl-data-table__cell--non-numeric">Amount</th>
</tr>
</thead>
<tbody>
<?php
$temp = "";
while($row = mysqli_fetch_assoc($result))
{
$temp="<tr><td>".$row["name"]."</td><td>".$row["regno"]."</td><td>".$row["amount"]."</td></tr>";
echo $temp;
}
?>
</tbody>
</table>
You can use something like this using jquery:
$('tr').click(function(){
alert("Name:"+$(this).children('td:nth-child(1)').html()+",Registration nio:"+$(this).children('td:nth-child(2)').html()+",Amount:"+$(this).children('td:nth-child(3)').html());
});
This fetches the information in each row.

Data Table hangs sporadically (No data available in table) when data sorted or loaded with Knockout binding

I am binding data to a table using Knockout JS and the JQuery/Bootstrap based; Data Table API. The table becomes unresponsive sporadically when sorted or loaded. There are no errors in the log.
It also shows 0 of 0 data as illustrated in the screenshot below:
I have seen similar errors/issues but could not get a solutions for them, E.g. This post:
Code:
function viewModel(){
var self = this;
self.Data = ko.observableArray([]);
$.getJSON('https://restcountries.eu/rest/v1/all', function(data){
self.Data(data);
});
}
ko.applyBindings(viewModel());
$(document).ready(function() {
$('#example').dataTable();
});
HTML:
<div class="table-responsive">
<table id="example" cellspacing="0"
class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
</tr>
</tfoot>
<tbody data-bind="foreach: Data">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: capital"></td>
<td data-bind="text: population"></td>
<td data-bind="text: region"></td>
</tr>
</tbody>
</table>
</div>
Here is a full working example (JSFiddle) utilizing a REST API so that the exact problem is accurately replicated:
I think the problem with your example may be with how you're dealing with your data when you get it back from the API call.
I've put together a quick example that achieves what I think you're trying to achieve and the sorting and searching work quickly for me.
When I get the JSON data back from the API, I use the Knockout arrayMap utility function to create an array of "Country" objects that have observable properties that I have mapped the JSON data to. I've bound the table to my observableArray of Country objects.
Initialising the data table in the same way you have works fine for me in this case.
The full working solution is here: http://plnkr.co/edit/eroIox6zqBFOVnf86Mdk?p=preview
script.js
var ViewModel = function(jsonData) {
var countries = ko.utils.arrayMap(jsonData, function(item) {
return new Country(item)
});
this.Countries = ko.observableArray(countries);
};
var Country = function(jsonItem) {
this.Name = ko.observable(jsonItem.name);
this.Capital = ko.observable(jsonItem.capital);
this.Population = ko.observable(jsonItem.population);
this.Region = ko.observable(jsonItem.region);
};
window.onload = function() {
$.getJSON('https://restcountries.eu/rest/v1/all', function(data) {
ko.applyBindings(new ViewModel(data));
$("#example").dataTable();
});
}
index.html
<table id="example" cellspacing="0" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
</tr>
</tfoot>
<tbody data-bind="foreach: Countries">
<tr>
<td data-bind="text: Name"></td>
<td data-bind="text: Capital"></td>
<td data-bind="text: Population"></td>
<td data-bind="text: Region"></td>
</tr>
</tbody>
</table>
Tables are fairly slow to render within Knockout, and if your table is based on a computed, I could see how you could have some issues with redrawing time. But that's not happening here.
Apart from loading the data and binding it to the table rows, there's no data manipulation going on in your viewmodel. All the data manipulation is done by the dataTable plug-in, which you initialize with a single jQuery call. Properly, that should be done within a binding handler. You also need to know what is going on within the plug-in when it sorts, filters, or whatever it does, because you may need to mediate those changes back to your observableArray within your binding handler.
Bottom line: you need a binding handler for the dataTable. There may be one already written; I haven't Googled for it. Give that a try.

Categories