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?
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
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();
});
Below is my table's html code -
<table id="srchTable" style="width:100%; font-size:0.85em;"">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tr ng-repeat="jsonSearchData in searchData">
<td><a id="link1" href="" ng-click="openPopUp()">{{jsonSearchData.Name}}</a></td>
<td>{{jsonSearchData.Age}}</td>
<td>{{jsonSearchData.Salary}}</td>
</tr>
</table>
This is js code for table -
$('#srchTable').dataTable();
I am populating table from json result. Below is the json -
[{
"Name":"Sam",
"Age":"25",
"Salary":"$25000"
},
{
"Name":"Phillip",
"Age":"25",
"Salary":"$30000"
}]
Now when I am clicking on sort icons table is showing No data available in table message. And same thing is happeing when I am trying to search in data table.I tried below code but it didn't worked.
$('#srchTable').dataTable({
"ordering":true,
"searching": true
});
Please help.
In this case jquery is executed before angular render the data .
You don't need to use jquery here. Angular provides filters
and sorting options .
example :
<input type="search" ng-model="query">
<table id="srchTable" style="width:100%; font-size:0.85em;"">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tr ng-repeat="jsonSearchData in searchData | filter : query | orderBy : 'name'">
<td><a id="link1" href="" ng-click="openPopUp()">{{jsonSearchData.Name}} </a></td>
<td>{{jsonSearchData.Age}}</td>
<td>{{jsonSearchData.Salary}}</td>
</tr>
</table>
Be sure to wrap your data rows in <tbody></tbody>.
<table id="srchTable" style="width:100%; font-size:0.85em;"">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody><!-- start after </thead> Be sure not to include in loop -->
<tr ng-repeat="jsonSearchData in searchData">
<td><a id="link1" href="" ng-click="openPopUp()">{{jsonSearchData.Name}}</a></td>
<td>{{jsonSearchData.Age}}</td>
<td>{{jsonSearchData.Salary}}</td>
</tr>
</tbody><!-- end after loop -->
</table>
<table >
<thead>
<tr >
<th>Honda</th>
</tr>
</thead>
<tbody>
<tr>
<td>CRV</td>
<td>HRV</td>
<td>Accord</td>
</tr>
</tbody>
<tr>
<th>Toyota</th>
</tr>
</thead>
<tbody >
<tr>
<td>Camry</td>
<td>Corolla</td>
</tr>
</tbody>
</table>
I have a requirement to show / hide table row. This form should hide the car model initially and show only Honda and Toyota. when you click Honda, it should show all the honda's model. How to achieve this in angualr js. Please help me.
you can use ng-hide and ng-show option of angular js. It takes boolean which can be initiated no click event.
<table >
<thead ng-show="showHonda">
<tr >
<th>Honda</th>
</tr>
</thead>
<tbody ng-hide="showHonda">
<tr>
<td>CRV</td>
<td>HRV</td>
<td>Accord</td>
</tr>
</tbody>
<thead ng-show="showToyota">
<tr>
<th>Toyota</th>
</tr>
</thead>
<tbody ng-hide="showToyota">
<tr>
<td>Camry</td>
<td>Corolla</td>
</tr>
</tbody>
</table>
and on ng-click event change the value of showHonda and showToyota accordingly.
<table ng-app="myApp" ng-controller="customersCtrl">
<thead>
<tr data-ng-click="ShowHonda=!ShowHonda">
<th>Honda</th>
</tr>
</thead>
<tbody>
<tr data-ng-show="ShowHonda">
<td>CRV</td>
<td>HRV</td>
<td>Accord</td>
</tr>
</tbody>
<tr data-ng-click="ShowToyota=!ShowToyota">
<th>Toyota</th>
</trdata-ng-click>
</thead>
<tbody>
<tr data-ng-show="ShowToyota">
<td>Camry</td>
<td>Corolla</td>
</tr>
</tbody>
</table>
Script :-
var myAngApp = angular.module('myApp', []);
myAngApp.controller('customersCtrl', function ($scope) {
$scope.ShowHonda = false;
$scope.ShowToyota = false;
});