Why does the search box disappear when adding new columns in the HTML of datatables? I'm trying to convert something to jquery and data tables, but cannot figure out how to add new data besides for data in the pre-existing settings that I got when I downloaded the program. The website isn't very clear on how to add new columns...
http://datatables.net/examples/api/multi_filter.html
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
<th>new column</th>
</tr>
</thead>
<tbody>
Is it possible to load whole table with all columns and just hide certain columns? That would be most efficient.
Related
In my WordPress options page, for creating fields I am using Fluent Framework. It is similar to Meta Box. So both of them use do_settings_fields function and the function generates the code like this:
<table class="form-table">
<tr>
<th scope="row">Header 1</th>
<td>Element 1</td>
</tr>
<tr>
<th scope="row">Header 2</th>
<td>Element 2</td>
</tr>
<tr>
<th scope="row">Header 3</th>
<td>Element 3</td>
</tr>
<tr>
<th scope="row">Header 4</th>
<td>Element 4</td>
</tr>
</table>
It looks like this:
In this table, I want to use firs row as a one row like this:
I creted a javascript file to fields/custom_html directory and hide scope with jQuery and enqueue the javascript file like this:
jQuery(document).ready(function()
{
jQuery('th[scope="row"]').first().hide();
});
But this doesn't completely solve my problem. Because I don't mind if I only use one row, but it's very problematic for multi-rows. Maybe I need to close the table tag and open a new table tag again, but I haven't been able to do this with my limited jQuery knowledge.
Merging two columns you have to use "colspan" attributes which can helpful, Here I am sharing the code for jquery.
$(document).ready(function(){
var $table_head = jQuery('tr').first();
var value = $table_head.text();
$table_head.html('<th colspan="2">'+value+'</th>');
});
I'm currently trying to change on a bootstrap table it's configurations dynamically, based on some user configurations stored in localStorage and reload it.
The table is filled at page load, but some events can fire inside the page and change it's configuration based on user settings.
I took a look at the official documentation, and some questions in SO. And I tried to do it, as below:
var $table = $('#grd-fatura');
$table.bootstrapTable('refresh', {
pageSize: 2
});
(The localstorage.getItem block and rules were removed from above code for testing purposes.)
And here is my table code (note that some elements are in portuguese):
<table
id="grd-fatura" data-click-to-select="true" data-response-handler="responseHandler"
data-pagination="true" #*data-height="460"*# data-show-footer="true" data-search="true"
data-show-columns="true" data-cache="false" data-show-toggle="true" data-show-export="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="ID" data-unique-id="ID" data-align="left" data-visible="false" data-sortable="true">Código</th>
<th data-field="estabelecimento" data-align="left" data-sortable="true">Estabelecimento</th>
<th data-field="historico" data-align="left" data-sortable="true">Histórico</th>
<th data-field="tipo" data-align="left" data-sortable="true">Tipo</th>
<th data-field="pessoa" data-align="left" data-sortable="true">Pessoa</th>
<th data-field="emissao" data-align="center" data-sortable="true">Emissão</th>
<th data-field="referencia" data-align="left" data-sortable="true">Referência</th>
<th data-field="situacao" data-align="left" data-sortable="true">Situação</th>
<th data-field="total" data-align="right" data-sortable="true" data-footer-formatter="Totalizador">Total</th>
</tr>
</thead>
</table>
The code does not work. The table does not refresh, and the code does not generate any errors. I took a look at some examples, and could not find where I am going wrong. So, how do I dynamically change the Boostrap table settings? What I am doing wrong in the above code?
Note: I am using Bootstrap 3.
Try this:
$table.bootstrapTable('refresh', {
query: {pageSize: 2}
});
applying datatable on each table using id but it only triggers for one table and give error in console.
"Uncaught TypeError: Cannot set property 'nTf' of undefined" while i need to display it on every table .
Using class cannot be applied because each table has different td's count .
for instance i have two tables with id's table1 & table2 and calling datatable as
$('#table1').DataTable();
$('#table2').DataTable();
Please advise any help would be appreciated
my first table is
<table id="table1">
<thead>
<tr>
<th>No.s</th>
<th>Title</th>
<th>project</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>test</td>
<td>test project</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3"></th>
</tr>
</tfoot>
</table>
My second table is
<table id="table2">
<thead>
<tr>
<th>No.s</th>
<th>Title</th>
<th>Task</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>test</td>
<td>test task</td>
<td>Edit</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4"></th>
</tr>
</tfoot>
</table>
Using class cannot be applied because each table has different td's count
There is nothing to do when we use datatable for mutiple tables it works only for the tables which have same count of td's and can be applied using the both table's same class
Live Demo
i just had this problem and it turned out to be one too many tds in the tfoot. Check your rows and columns for extras, unclosed tags etc.
I have a table of records and the user can click on a name to show more detailed information about that certain record. I have it set up with a tag but each time the link is clicked it only shows up on the top of the page or the very first row. Is there a way to get it to show under each name when it is click. Here is the code I have...
<table width="75%" border="1">
<tr>
<th>Student Name</th>
</tr>
<cfoutput query="Q">
<tr>
<td>#Q.sln#, #Q.sfn#</td>
</tr>
<tr>
<td><cfdiv id="detail"></cfdiv></td>
</tr>
</cfoutput>
</table>
Since you are in a loop <cfoutput query="Q"> you will need to make detail a unique identifier. As you have it written every iteration of your loop has the same id. Maybe just add the current row number to make it unique.
<table width="75%" border="1">
<tr>
<th>Student Name</th>
</tr>
<cfoutput query="Q">
<tr>
<td>#Q.sln#, #Q.sfn#</td>
</tr>
<tr>
<td><cfdiv id="detail#Q.CurrentRow#"></cfdiv></td>
</tr>
</cfoutput>
</table>
I have a table that is populating with ng-repeat. Table has 100 rows, if you click on any row new table will show up, (with ng-show) with more deep description of the product. But ng-repeat is slow and generating 101 table on-load of the page, and this is slowing down the performance of my web-app. Is there a way, using angular (without external libraries), to run ng-repeat only when user clicks on the some row (ng-show is true)?
NOTE: Every hidden table is unique.
Here is my html table:
<tbody>
<tr ng-repeat-start="car in sortedCarList" ng-click="showTable(car)">
<td><a target="_blank" href="{{car.carLink}}">{{car.name}}</a></td>
<td>{{car.review}}</td>
<td>{{car.rating}}</td>
<td>{{car.fiveStarPercent}}</td>
<td>{{car.recommended}}</td>
<td>{{car.price}}</td>
</tr>
<tr ng-repeat-end ng-show="modelRow.activeRow==car.name && showDetails && car.allReviews.length!=0" class="hidden-table">
<td colspan="6">
<table class="table table-striped table-bordered table-condensed table-hover">
<thead>
<tr>
<th>Year</th>
<th>Reviews</th>
<th>Rating <span class="fiveStar">/5</span></th>
<th>Recommended</th>
<th>Reliability Rating</th>
<th>Performance Rating</th>
<th>Running Costs Rating</th>
</tr>
</thead>
<tbody ng-repeat="rev in car.allReviews">
....
Try using ng-if rather than ng-show to toggle the nested tables. This should delay any ng-repeat in the nested table to happen until it's shown.