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>
Related
Hello guys I hope you can help me, I'm using bootstrap table to order the data from json query, specially this source example and I'm using chrome:
<link href="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.js"></script>
<table
id="table"
data-toggle="table"
data-flat="true"
data-search="true"
data-url="http://127.0.0.0:8000/hello">
<thead>
<tr>
<th data-field="field.name" data-sortable="true">Name</th>
<th data-field="field.count" data-sortable="true">Stargazers</th>
<th data-field="field.count.forks" data-sortable="true">Forks</th>
<th data-field="field.description" data-sortable="true">Description</th>
</tr>
</thead>
</table>
This works fine, the problem is that If I try to re order data that previously I edit the dome with a for it shows again the data in the json object and order the row.
I think, for some reason I need to append data to the json object the server responses, the issue is that I can not see where is or which is the variable name where boostap table storage this information, I can see the json in the network option "in chrome" but I need to get the name variable to append more data.
It would help me a lot to know how to get this, any idea ?
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'm trying to loop through an array in order to print some column headers dynamically. I see that the array values are inserted into the HTML code, but I'm unable to sort my table whenever I click on one of the column headers.
Strange thing is: when I replace the {{ colHeader }} variable with plaintext html the tablesorter is functioning normally. So does anyone know what I'm doing wrong, and how to fix it?
<script type="text/javascript">
$scope.colHeaders = {
'id' ,
'name' ,
'symbol',
};
$scope.sortType = 'id'; // specifies column to sort
</script>
<table class="table">
<thead>
<tr>
<th ng-repeat="colHeader in colHeaders">
<a href="#" ng-click="sortType = '{{ colHeader }}'">
column header
</a>
</th>
</tr>
</thead>
</table>
Using inline functions in html templates is a bad idea.
Try using a function from your controller like this: <th ng-repeat="colHeader in colHeaders" ng-click="sortBy(colHeader)">
Here is a working plunker: https://plnkr.co/edit/NTgjVpKoKhrjyP1YuN2n
I am using bootstrap-table to show tables in my page and I use TableExport.js , FileSaver.js and .xlsx.core.min.js libraries in order to save the table in .xlslx format.
The problem is that the below column in excel is shown in general format, causing the values to be displayed like 1,00582E+11, while the right value is 100582012421.
I tried data-tableexport-msonumberformat="\#" to force export process to treat this column as a text, but the result didn't change. I also read this similar question and I create a CSS class
.text{
mso-number-format:"\#";/*force text*/
}
but neither this solution worked for me..
<table id="mytable" class="table table-hover"
...
data-url="myfile.json"
...
>
<thead>
<tr>
...
<th data-field="productId" data-tableexport-msonumberformat="\#">Product</th>
...
</tr>
</thead>
</table>
Use into td the class tableexport-string
<td class="tableexport-string">{{$Rep->deviceName}}</td>
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!