I have been trying to a table to get populated by using data from a ajax request. I have been following this tutorial as the starting point.
I have created a PHP web service that when queried:
table_ws.php?id=2
Returns the data in the following format:
{"status":200,"status_message":"Yahoo!","data":[{"sent_date":"2012-01-01","serial_number":"342312","text":"Great service","looked_into":"0"},{"sent_date":"2012-02-16","serial_number":"2343662","text":"Happy with the product","looked_into":"0"},{"sent_date":"2012-03-04","serial_number":"342356","text":"Experience could have been better","looked_into":"0"}]}
I have created the table in HTML like so:
<table id="tbl_details" class="tbl">
<thead>
<tr>
<th>Sent Date</th>
<th>Number</th>
<th>Text</th>
<th>Resolved?</th>
</tr>
</thead>
</table>
The relevant parts of my javascript are as follows (for the sake of clarity I am excluding the code not relevant for the question):
...
...
...
.on("click", function(d) {
table.ajax="table_ws.php?id=" + d.id
table.columns=[
{"data": "sent_date"},
{"data": "serial_number"},
{"data": "text"},
{"data": "looked_into"}
];
});
...
...
...
$(document).ready( function () {
table=$('#tbl_details').DataTable();
table.processing=true;
table.serverSide=true;
});
Though the table appears as expected on the page, it is not populated "onclick" of the button.
The answer to this question on StackOverflow says that the table needs to be destroyed and recreated everytime new data is put in. But the function fnDestroy() does not seem to exist.
How do I get around this problem?
Related
I have a page containing a bootstrap table, using the following code:
<table class="display table table-bordered table-striped w-100"
data-click-to-select="true" data-unique-id="NoticeID"
data-pagination="true" data-sortable="true" data-page-size="10"
data-single-select="true" data-maintain-selected="true"
data-id-field="NoticeID" id="notices" name="notices">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="NoticeID" data-sortable="true">ID</th>
<th data-field="Title" data-sortable="true">Title</th>
<th data-field="TimesViewed" data-sortable="true">Views</th>
<th data-field="IsActive" data-sortable="true">Active</th>
</tr>
</thead>
</table>
In my page load script, I call the following function which uses an AJAX call to populate the table with data:
function loadNotices() {
$.ajax({
url: '../handlers/getusernotices.ashx',
data: null,
method: 'post',
dataType: 'json',
success: function (data) {
$('#notices').bootstrapTable({
data: data.Notices
});
$('#notices').bootstrapTable('load', data.Notices);
},
error: function (e) {
console.log(e.responseText);
}
});
}
Everything works just fine, except for one little odd thing: Looking at the screenshot below, you'll notice that the 'Loading, please wait...' message that the bootstrap table displays while data is being loaded never goes away, even after the data has been loaded:
Am I missing something that I need to do once the table is loaded to accomplish this?
You have to include bootstrap's table css in your html file.
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.20.2/dist/bootstrap-table.min.css">
If this doesn't work, try to include this js script after the rest of the scripts
<script src="https://unpkg.com/bootstrap-table#1.20.2/dist/bootstrap-table.min.js"></script>
Links from here
In order to populate a table through AJAX, one option is to follow the example provided by the documentation.
Analysing how the code works, you may notice that it calls the ajax function which receives params as argument. With that, you have to pass an object with the following structure:
{
rows: [
{ yourDataHere } , ...
]
}
And those columns have to correspond to the ones you described in the HTML through the data-field attribute. You can see this in action in the running example.
Premise:
I'm playing around with knockout and have been trying to display a populated array variable through and html table.
Problem:
The problem is that I don't know how to display the "last_name" property in the variable array shown below.
JSON FILE + HTML FILE:
//JSON FILE
$(function()
{
console.log('Ready');
ko.applyBindings(new myvm());
}
function myvm()
{
var self = this;
//cust contains the data mentioned at the bottom
self.customers = cust;
}
//HTML FILE
<table class= "table" id="kocustomertable" border= "1">
<tr>
<th>Last name</th>
</tr>
<tbody data-bind = 'customers'>
<tr>
<td data-bind = 'text: last_name'></td>
</tr>
</tbody>
</table>
SAMPLE CONTENT OF DATA INSIDE VARIABLE "CUST"
[
{"id":1,"first_name":"Tracey","last_name":"Jansson","email":"tjansson0#discuz.net","gender":"Female","ip_address":"167.88.183.95","birthdate":"1999-08-25T17:24:23Z","website":"http://hello.com","city":"Medellín","credits":7471}
]
It looks like the data-bind on your <tbody> is missing a binding.
Your have referenced the your view model customers property in your HTML but you haven't told knockout how to bind it to the view. If you add a foreach binding, you should see that you get a table row per customer. For example, you could replace your opening <tbody> with:
<tbody data-bind='foreach: customers'>
Hope this helps. Take a look at the knockout documentation on foreach for more info.
I am trying to do some filtering (using bootstrap-table by wenzhixin) on a table I have being populated via JSON.
Part of HTML:
<button class="btn btn-primary" id="filterBtn">Filter</button>
<div class="container">
<table class="table table-bordered table-hover" id="table">
<thead>
<tr>
<th data-field="make">Make</th>
<th data-field="model">Model</th>
<th data-field="year">Year</th>
</tr>
</thead>
</table>
</div>
Part of JS:
// JSON file is input from a successful AJAX call.
function populateTable(json) {
$('#table').bootstrapTable({
data: json
})
}
// a button is click in html which calls this function.
function filterBy(model) {
console.log("filterBy is called");
$('#table').bootstrapTable('filterBy', {
make: [model]
});
}
The table populates correctly with all the data but once I hit the button I see that filterBy() is called but all that happens is it looks like the page refreshes but all the data in the table is still there like no filtering ever occurred.
I've tried changing make: [model] to make: ["Honda"] just as a test and it still doesn't work. It still performs the same behavior of refreshing the page with all the data still in tact.
Not sure what I am doing incorrectly.
https://github.com/wenzhixin/bootstrap-table/commit/de867d379a46b377efa7eef83fdf898b9073b28c
This is an issue i think after feature version: 1.11.0. Check the bootstrap-table.js and find this. I hope its will solve your problem. Good Luck!
From the the controller I am passing a json encoded object to my view. In the view i have used bootstrap table to display the data. However in the table it show No matching records found. Please help.
here is my controller
enter image description here
here is my view
enter image description here
I guess your model is roommaster. To get Eloquent model to json use
$roommaster->toJson()
because json_encode($roommaster) needs $roommaster to be an array and in your case is an object
Have you checked the source code of the page the table is on to see if the code is outputting JSON to data-url?
If it is, I think the issue isn't with the PHP code but the table itself. Try adding this to the blade template and getting rid of data-url from your table.
Code for table:
<table class="table table-hover" data-click-to-select="true">
<thead>
<tr>
<th data-field="id" data-checkbox="true">ID</th>
<th data-field="roomname">Room name</th>
<th data-field="Desc">Description</th>
<th data-field="price">Price</th>
</tr>
</thead>
</table>
Code to populate table with data:
<script>
var $table = $('.table.table-hover');
$(function () {
var data = {!! $roomname !!};
$table.bootstrapTable({data: data});
});
</script>
So this is what I'm doing.
I'm using the DataTables plugin, and also the magnific popup plugin. What I'm trying to do, is have a table of users, load dynamically from a database, and loaded into the DataTables, table. There is a link, in each row, for the specified user. Now, what I'm trying to do, is when you click the link, instead of going to another page, it create a popup with the data. It doesn't work. I debugged it sort of, and what I'm seeing, is since, the data is pulled from the database, through ajax, the popup plugin, doesn't see the data. Is there a way to get around this? I'm trying to make it as efficient as possible, and reduce CPU load on the server, so..
<table id="player_table" class="display">
<thead>
<tr>
<th>ID</th>
<th>Username</th>
<th>Last IP</th>
<th>Total Commands</th>
<th>Total NPC Clicks</th>
<th>Total Object Clicks</th>
<th>Total Item Clicks</th>
<th>Last Trade</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>142</td>
<td>Dayghost</td>
<td>127.0.0.1</td>
<td>325</td>
<td>568</td>
<td>1433</td>
<td>12503</td>
<td>16:42</td>
<td>more Info</td>
</tr>
</tbody>
</table>
This table is loaded dynamically, and has 150 random whatevers in it.
The following is the ajax, that gathers the data.
$('#player_table').dataTable({
"processing": true,
"serverSide": true,
"ajax": "serverside/handler.php"
});
This is the popup module
$('.popup').magnificPopup({
midClick: true,
type: 'ajax'
});
The popup module, will only work, IF and only if, the data was loaded at the time the page was made. It won't work on the data gathered through ajax. I tested this on a test button.
I edited the usage of the .popup class
Although I can't see any html elements with the class .popup on them in your code (?) I'm guessing what you need to do is call Magnific popup after your content is generated.
Order of events would be:
Page is loaded with the static data
Magnific is initialised on the data currently on the page
Data is refreshed using AJAX
Magnific no longer tied to any elements on the page, so magnific needs to be reinitialised
This would be as simple as calling:
$('.popup').magnificPopup({
midClick: true,
type: 'ajax'
});
After the AJAX content has loaded.
I figured it out.
I put function..
$('.popup').magnificPopup({
midClick: true,
type: 'ajax'
});
into a onComplete setting in DataTables.