I’m using Bootstrap Table http://bootstrap-table.wenzhixin.net.cn/
All rows in the table are linked with data-href=.
All links work correctly after the table is loaded, but when I re-sort the table (i.e. click on "URL" column header), the links no longer work.
Any ideas how to fix it?
Here is a test code:
<table class="table" id="lst_art_adm"
data-toggle="table"
data-striped="true"
data-search="true"
data-sort-name="site"
data-sort-order="asc"
data-mobile-responsive="true"
mobileResponsive="true">
<thead>
<tr>
<th data-field="site" data-sortable="true">Site</th>
<th data-field="url" data-sortable="true">URL</th>
</tr>
</thead>
<tbody>
<tr id="tr-id-1" class="mrow" data-href="https://google.com">
<td id="td-id-1" data-sortable="true">Google</td>
<td>google.com</td>
</tr>
<tr id="tr-id-2" class="mrow" data-href="https://yahoo.com">
<td id="td-id-2" data-sortable="true">Yahoo</td>
<td>yahoo.com</td>
</tr>
</tbody>
</table>
$(function(){
$(".mrow").on("click", function (e) {
window.location = $(this).data("href");
});
});
And the jsfiddle
I found a solution myself :)
The table must be included in a div element, i.e. class="mytable".
Then the jquery should be changed like this:
$(function(){
$(".mytable").on("click", ".table tbody tr", function()
window.location = $(this).data("href");
});
});
Then the function will found the row after re-sorting.
Related
I am trying to create a table in reactjs using bootstrap. Everything seems fine except:
As you can see, the titles inside the thead tag is not aligned exactly above its corresponding td tag. Is there a way to do it?
Here is the code:
<Table striped hover responsive >
<thead>
<tr>
<th>Rank</th>
<th>Logo</th>
<th>Name</th>
<th ></th>
<th>Wins</th>
<th>Loss</th>
<th>Draws</th>
<th>Games</th>
<th>GF</th>
<th>GA</th>
</tr>
</thead>
<tbody>
{team && team.map((team, key) =>{
return <tr key={key}>
<td>{key + 1}</td>
<td><img src={team.team.logos[0].href} alt='team logo' width={40} height={40}/></td>
<td >{team.team.name}</td>
<td>{team.stats[0].value}</td>
<td>{team.stats[1].value}</td>
<td>{team.stats[2].value}</td>
<td>{team.stats[3].value}</td>
<td>{team.stats[4].value}</td>
<td>{team.stats[5].value}</td>
</tr>
})}
</tbody>
</Table>
I cannot see the code, but there seems to be some margin for the td. But you will still have issues with it lining up due to the number of words in td to the data listed. A solution would be styling each td by itself until you get it how you'd like.
I have a DataTable in OrderDetails.aspx.vb
Public Outlets As New DataTable
Outlets = objOrdersData.GetOnlineConfigCall()
In my OrderDetails.aspx
<script>
var Outlets = '<%=Outlets%>';
</script>
I want to display outlets details in a html table using AngularJS
I defined my html table as
<table class="table">
<thead>
<tr> <th>Outlets</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="outlet in Outlets">
<td><a >{{outlet.PartnerName}}</a></td>
</tr>
</tbody>
</table>
but it's not working.
Provided that Outlets is a valid js array, you just need to assign it to scope variable in your controller like:
OrderApp.controller("OrderCntrl", ['$scope', function ($scope) {
$scope.outlets = Outlets;
}]);
and then bind your data in the template like:
<tr ng-repeat="outlet in outlets">
<td><a >{{outlet.PartnerName}}</a></td>
</tr>
I have this bootstrap table where I cannot populate with my data, on data-url im calling a function inside my controler, when I inspect the the object i can see that it loaded correctly but for some reason it not populating the table Am I missing somenthing?
<table id="t_user" class="table table-hover tbl_usr"
data-toggle="table"
data-url="<?php echo site_url('mda_user/tblrefresh')?>"
data-toolbar="#custom-toolbar"
data-click-to-select="true"
data-single-select="true"
data-search="false"
data-show-refresh="false"
data-show-toggle="true"
data-show-columns="true"
data-pagination="true"
data-search="true"
data-height="300"
data-response-handler="responseHandler">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id" data-sortable="true"><?= $id?> </th>
<th data-field="name" data-sortable="true"><?= $name?> </th>
<th data-field="password"> <?=$password?></th>
<th data-field="operate"
data-halign="center"
data-align="center"
data-formatter="operateFormatter"
data-events="operateEvents">
<?=$operation?>
</th>
</tr>
</thead>
</table>
What is the content of your responseHandler(res) function?
eg, I defined my table mostly inline but also with some JS:
$().ready(function(){
$('#myTable').bootstrapTable({
url : "/api/data",
responseHandler: function(res) {
return res.data.content;
}
})
(The response is wrapped in some JSON that I need to remove to pass the pure array to bootstrap-table)
I have a table which I have applied sorting to but to complete this task I would like the classes to change to show carets going up or down based on the sorting.
As you can see I have used the standard SortableMixin within Ember to get the sorting functionality but I'm having trouble changing the class of the individual element which has been clicked.
App.CampaignsController = Ember.ArrayController.extend({
sortProperties: ["id"],
sortAscending: true,
actions: {
sortBy: function(property){
if (this.get("sortProperties")[0] === property){
this.toggleProperty("sortAscending");
} else {
this.set("sortProperties", [property]);
this.set("sortAscending", true)
}
}
}
});
The table I'm I've applied the actions to is below:
<table class="table table-striped table-hover">
<thead>
<tr>
<th {{action "sortBy" "name"}}><i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>Campaign Name</th>
<th {{action "sortBy" "campaign_code"}}><i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>Campaign Code</th>
</tr>
</thead>
<tbody>
<td>{{name}}</td>
<td>{{campaign_code}}</td>
</tbody>
</table>
I'm using the sortAscending boolean to dictate what CSS class will appear. My problem is if I click the first heading, the classes on the second heading also change.
How do I get the CSS to change only on the heading that I have clicked?
Your <th> now has state (whether it's sorted, and whether it's ascending or descending), so you should wrap it up in a component. Something like this
<table>
<thead>
<tr>
{{#sortable-th property='name' action='sortBy'}}
Campaign Name
{{/#sortable-th}}
</tr>
</thead>
</table>
The component's template
// templates/components/sortable-th.js
<th>
<i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>
{{yield}}
</th>
and code
// components/sortable-th.js
export default Ember.Component.extend({
sortAscending: true,
click: function() {
this.toggleProperty('sortAscending');
this.sendAction('action', this.get('property'), this.get('sortAscending'));
}
}
That's just a rough outline, try the implementation yourself. But that's how I would start thinking about it.
i cant find how put a cell with an href in a dojo toolkit datagrid, the version od dojo that am using is 1.6
this is my table
<table id="billsGrid" dojoType="dojox.grid.DataGrid" data-dojo-props="escapeHTMLInData:false">
<thead>
<tr>
<th field="name" width="auto">name</th>
<th field="description" width="auto">Description</th>
<th field="activity" width="auto">activity</th>
</tr>
</thead>
</table>
am getting the data with Json.
You can use formatter function to format a cell. For example, you can declare a JavaScript object that contains all the formatting function.
var myFormatters = {
formatLink : function(value, index) {
return "<a href='#'>" + value + "</a>";
}
};
Then in the grid,
<table id="billsGrid" dojoType="dojox.grid.DataGrid" data-dojo-props="escapeHTMLInData:false" formatterScope="myFormatters" >
<thead>
<tr>
<th formatter="formatLink" field="name" width="auto">name</th>
<th field="description" width="auto">Description</th>
<th field="activity" width="auto">activity</th>
</tr>
</thead>
</table>
You don't need to create a scope object for the formatters, then this formatting functions should be in the global scope and then you can omit the formatterScope attribute in the grid.
dojo grid is escaping html tags by default for security reasons, you can simply enable html tags doing this:
<table dojoType="dojox.grid.DataGrid" escapeHTMLInData="false" ...>
or this if your grid is added programatically
escapeHTMLInData: false
more info here:
http://dojotoolkit.org/reference-guide/dojox/grid/DataGrid.html