I'm using datatable plugin but having an issue with the sorting. default sorting order is asc and i want data in descending order when the page is loaded.
following is the script i'm using for initialization:
jQuery(document).ready(function(){
App.init();
});
also tried to use this
$('#sample_1').dataTable();
but it effects the menus. Menu sliders stops working and datatable also not working properly with this.
and there is no error in console.
Thanks
Without seeing your init code and HTML, we can't really point out what is going wrong.
If your table is visible before the DataTable is initialized, then you'll need to make sure it is sorted correctly in the original HTML.
When initializing the DataTable you'll want to set up the initial sorting - e.g. for descending sort on the first column:
$table = $("#sample_1").dataTable({
"aaSorting": [[0, 'desc']]
});
Here is the HTML:
<table class="table table-striped table-bordered adjust_table" style="table-layout:fixed;" id="sample_1"><thead>
<tr>
<th class="">Order ID</th>
<th class="">Name</th>
</tr>
</thead>
<tbody>
<tr>
<th class="">2001</th>
<th class="">John</th>
</tr>
<tr>
<th class="">2002</th>
<th class="">Marry</th>
</tr>
</tbody>
</table>
And following is the init code:
App.init();
Related
Is there a way to make the HTML table as data source for highstock chart type of highchart lib ?
You need to define dates instead of categories.
Example:
- http://jsfiddle.net/ysxo739h/
<table id="datatable">
<thead>
<tr>
<th></th>
<th>Jane</th>
<th>John</th>
</tr>
</thead>
<tbody>
<tr>
<th>2006-01-01</th>
<td>3</td>
<td>4</td>
</tr>
<tr>
<th>2006-01-02</th>
<td>5</td>
<td>6</td>
</tr>
</tbody>
I'm using JQuery Mobile 1.4. How can I set the column hide or unchecked on table load.
Here is part of my code:
<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
<thead>
<th>Movie Title</th>
<th data-priority="1">Rank</th>
<th data-priority="2">Reviews</th>
<thead>
<tbody>
....
</tbody> </table>
How do I hide the Reviews column on default or unchecked it in Column option?
There is probably an easier way, but this will work:
Given your table markup:
<table data-role="table" id="myTable" data-mode="columntoggle" class="ui-responsive table-stroke">
<thead>
<tr>
<th>Movie Title</th>
<th data-priority="1">Rank</th>
<th data-priority="2">Reviews</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
jQM will create a column toggle popup with 2 checkboxes, one for rank and one for reviews. Because you did not assign a data-priority to movie title, it is not allowed to be hidden. The popup takes the id of the table plus '-popup', so in my exaample we can find the checkboxes in the created popup with the following selector:
$("#myTable-popup .ui-checkbox label")
As you want to hide the Reviews column by default, we can simply trigger the click event on the second checkbox at pagecreate time:
$(document).on("pagecreate", "#page1", function(){
$("#myTable-popup .ui-checkbox label")[1].click();
});
Here is a working DEMO
In a Rails app, I'm using dataTables and a columnFilter.js.
I want the column search to be at the top of the dataTable and not the bottom.
So, I added this in the js:
.columnFilter(
sPlaceHolder: "head:before"
And I added a 2nd row to the header, like this:
<table class="display dataTable table table-striped table-bordered" id="dataTable1">
<thead>
<tr>
<th>Search</th>
<th>Search</th>
<th>Search</th>
<th>Search</th>
<th>Search</th>
</tr>
<tr>
<th>Date</th>
<th>Desc</th>
<th>Client</th>
<th>Project</th>
<th>Employee</th>
</tr>
</thead>
It looks fine on my Mac:
But, on Heroku the table rows are switched:
I am really new with Angular and just finished the tutorial and my contact-list app. I would like to perform some simple calculations with rails generated html table using AngularJS on the client-side.
My table looks like this
<table>
<thead>
<tr>
<th>Group</th>
<th>Current</th>
<th>Previous</th>
<th>Difference %</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>10</td>
<td>20</td>
<td>100%</td> //Want to use Angular
</tr>
</tbody>
<tr>
<td>Total:</td>
<td>10</td> //Want to use Angular
<td>20</td> //Want to use Angular
</tr>
</table>
I could write it with simple Javascript, however with time I would like these numbers to change styles, depending on the result, draw graphs, etc.
Please point me into the right direction! Thank you!
I have the following markup as a part of a Razor view:
<table>
<caption>Presidents</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Born</th>
<th scope="col">Died</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Washington</th>
<td>1732</td>
<td>1799</td>
</tr>
<!-- etc -->
</tbody>
</table>
With the "target schema for validation" set to HTML5, Visual Studio complains thusly:
Warning 1 Validation (HTML5): Element 'th' must not be nested within element 'tbody tfoot'.
Is this really true? If so, could someone link to the spec?
My understanding was that using <th> for row headers was not just legal but encouraged. It certainly seems fairly common, I could link dozens of tutorials explaining (seemingly sensibly) that it helps with accessibility.
Is this a VS bug? A real change coming with HTML5 (a good one? a bad one?)? What's the story?
My understanding was that using <th> for row headers was not just legal but encouraged
As far as I know, this was always legal in HTML 4 (and possibly its predecessors), and hasn't changed in HTML5.
W3C's HTML5 validator, while still experimental, reports no warnings or errors. Then again, I'm sure the HTML5 validation Visual Studio is using is experimental as well since HTML5 itself hasn't yet been finalized.
The HTML5 spec on marking up tabular data, specifically section 4.9.13, shows the use of <th> within <tbody> and <tfoot> to scope row data:
<table>
<thead>
<tr>
<th>
<th>2008
<th>2007
<th>2006
<tbody>
<tr>
<th>Net sales
<td>$ 32,479
<td>$ 24,006
<td>$ 19,315
<tr>
<th>Cost of sales
<td> 21,334
<td> 15,852
<td> 13,717
<tbody>
<tr>
<th>Gross margin
<td>$ 11,145
<td>$ 8,154
<td>$ 5,598
<tfoot>
<tr>
<th>Gross margin percentage
<td>34.3%
<td>34.0%
<td>29.0%
</table>
So it's perfectly legitimate to have <th> elements inside <tr> elements inside either a <tbody> or <tfoot>. As it should be anyway, since table headings aren't just found on table headers.
The HTML5 spec only requires that it be inside a tr, and the spec actually includes an example with a th nested inside a tbody.
Generally a TH in a THEAD will have a scope value of "col" while a TH in a TBODY will have a scope value of "row".