I have a generic DataTable with Responsive successfully configured. What I am after is to force DataTable to have a hidden column no matter what viewport it is displayed.
I tried searching for anything that might help me here but no luck.
Found what I am trying to achieve. You gotta add class="none" to the header of column you intend to always hide.
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th class="none">Age</th>
<th class="none">Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
Then simply initialize datatable with the Responsive plugin
$(document).ready(function() {
$('#example').DataTable();
});
Related
My goal is to create a table with React Bootstrap. To start with, I have used following example.
Now I have the following problem:
Instead of the header line of the table being above everything, it is suddenly to the left of the body. I have taken the code exactly as in the example and therefore don't know why this happens.
I use the react-bootstrap version: 1.5.2 and have imported the CSS in the class index.js like this import 'bootstrap/dist/css/bootstrap.min.css';.
And this is the code I copied from the page and inserted in my code 1:1.
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>3</td>
<td colSpan="2">Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</Table>
How can I fix this and what was the problem?
Have you imported table?
import Table from 'react-bootstrap/Table'
See bottom of documentation to learn more:
https://react-bootstrap.netlify.app/components/table/#table-api
I am trying to hide/show columns class datatable-colvis-basic but it is hiding only the table header not data. I think because my dynamic table data from angular js. what is solution for that.
<table id="table_id" class="table datatable-colvis-basic" id="DataTables_Table_0 " role="grid" aria-describedby="DataTables_Table_0_info" ng-show="numberLoad">
<thead>
<tr>
<th>#</th>
<th>Order Id</th>
<th>SKU</th>
<th>Vendor Name</th>
<th>Recived MP</th>
<th>Placed On MP</th>
<th>Placed On Date</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="mplist in getMpList | itemsPerPage:mpreportinfo.itemsPerPage" current-page="mpreportinfo.currentPage" total-items="total_count">
<td>{{$index + 1}}</td>
<td>{{mplist.order_id}}</td>
<td>{{mplist.sku}}</td>
<td>{{mplist.vendor_name}}</td>
<td>{{mplist.order_source_name}}</td>
<td>Amazon</td>
<td>{{mplist.placed_date}}</td>
</tr>
</tbody>
</table>
please check attached image
Put the ng-show in the element inside the table.
<table id="table_id" class="table datatable-colvis-basic" id="DataTables_Table_0 " role="grid" aria-describedby="DataTables_Table_0_info">
<thead>
<tr>
<th>#</th>
<th>Order Id</th>
<th>SKU</th>
<th>Vendor Name</th>
<th>Recived MP</th>
<th ng-show="numberLoad">Placed On MP</th>
<th>Placed On Date</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="mplist in getMpList | itemsPerPage:mpreportinfo.itemsPerPage" current-page="mpreportinfo.currentPage" total-items="total_count">
<td>{{$index + 1}}</td>
<td>{{mplist.order_id}}</td>
<td>{{mplist.sku}}</td>
<td>{{mplist.vendor_name}}</td>
<td>{{mplist.order_source_name}}</td>
<td ng-show="numberLoad">Amazon</td>
<td>{{mplist.placed_date}}</td>
</tr>
</tbody>
</table>
Here you have an example of show or hide columns with angularJS and ng-show.
I hope it helps you.
https://codepen.io/salva341/pen/oqyxKW
Using AJAX data, so I declare thusly:
<table st-table="displayedCollection" st-safe-src="eventStationsAnalyticData"
class="table table-striped">
<thead>
<tr>
<th st-sort="getters.station_id">Station #</th>
<th st-sort="station_name">Station name</th>
</tr>
<tr>
<th colspan="5"><input st-search="" class="form-control" placeholder="Global search ..." type="text"/></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayedCollection">
<td>{{row.station_id}}</td>
<td>{{row.station_name}}</td>
</tr>
</tbody>
There are no sort arrows visible (the CSS is included), and a breakpoint on the sort function is not being hit.
I believe that I have copied from the example & edited, but ...
Who can help?
[Update] Search is also not working. And, even if I remove the search, the sort still doesn't work.
Note to self, it seems to work in this Plunk, which you forked at the office. Try to figure out the difference to your actual code when you get home.
It is could possibly be something not visible here, such as a missing file; but, don't rule anyhing out.
I reduced my code to the smallest version with the error.
The point is, I create a table, the angular way, with an empty array for the Table rows.
After that, I fetch some data, and add it to that same array (with angular.copy)
Even though they are correctly added to the table itself, if I click on a column title to sort it, or try to filter by typing in the input box, the table deletes all the rows.
Could it be a problem with $digest or $apply?
I've created a codepen to reproduce
Codepen
HTML
<table datatable="" dt-options="datatable.dtOptions" dt-column-defs="datatable.dtColumnDefs">
<thead>
<tr><th></th><th>ID</th><th>Comuna</th><th>Proyecto</th></tr>
</thead>
<tbody>
<tr ng-repeat="doc in json">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</tbody>
</table>
Javascript
$scope.json = [];
$scope.Load = function(){
_.each(thaJson.d.results, function(doc, i) {
$scope.json.push(angular.copy(doc))
})
}
You need to set your datatable attribute to "ng" when using Angular Datatables the "angular way"
datatable="ng"
<table datatable="ng" dt-options="datatable.dtOptions" dt-column-defs="datatable.dtColumnDefs">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Comuna</th>
<th>Proyecto</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="doc in json">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</tbody>
</table>
I have a static html table on a page and i would like to transform it to a grid; so i applied this function after loading the table:
function createTable() {
// create the grid
var grid = new Ext.ux.grid.TableGrid("tabella-colocazioni", {
stripeRows: true // stripe alternate rows
});
grid.render();
}
I got this piece of code from here: http://www.java2s.com/Code/JavaScript/Ext-JS/CreateagridwithfromanexistingunformattedHTMLtable.htm . The result is the error "this.mainBody is undefined on ext-all-debug.js" on FireBug and the grid is empty. The html code of the table is this:
<table cellspacing="0" id="tabella-colocazioni">
<thead>
<tr style="background:#eeeeee;">
<th>Colocazione</th>
<th>Frequenza</th>
</tr>
</thead>
<tbody>
<tr>
<td>plusquam patria</td>
<td>1</td>
</tr>
<tr>
<td>patria pietate</td>
<td>1</td>
</tr>
<tr>
<td>Et patria</td>
<td>1</td>
</tr>
<tr>
<td>patria prohibet</td>
<td>1</td>
</tr>
<tr>
<td>Multos patria</td>
<td>1</td>
</tr>
<tr>
<td>patria reddidit</td>
<td>1</td>
</tr>
<tr>
<td>patronum patria</td>
<td>1</td>
</tr>
<tr>
<td>patria moesta</td>
<td>1</td>
</tr>
</tbody>
</table>
What is the problem? Thank you very much.
Code looks fine. Are you sure that all includes are correct (check the Firebug Net tab)? Are you sure that the Ext version you are using is supported by the ux?