wenzhixin bootstrap table no populating - bootstrap-table

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)

Related

How to get HTML element considering later content of another tag and not the class?

I am transforming HTML into a beautiful and tidy CSV. I have a file full of tables and with few classes. I have three types of tables, and their structure is the same. The only difference is the content within the "th" element which comes after the element in which I am interested. How can I get only the content of the tables that have certain text in "th" ("text_that_I_want_to_get")? Is there a way to insert a class with R inside each type of table?
Type 1 of table
<tr>
<th class="array">text_that_I_want_to_get</th>
<td class="array">
<table>
<thead>
<tr>
<th class="string">name</th>
<th class="string">mean</th>
<th class="string">stdev</th>
</tr>
</thead>
<tbody>
Type 2 of table
<tr>
<th class="array">text_that_I_want_to_get</th>
<td class="array">
<table>
<thead>
<tr>
<th class="string">name</th>
<th class="array">answers</th>
</tr>
</thead>
<tbody>
Type 3 of table
<tr>
<th class="array">text_that_I_want_to_get</th>
<td class="array">
<table>
<thead>
<tr>
<th class="string">Reference</th>
</tr>
</thead>
<tbody>
You need the following three xpaths:
xpath1 <- "//td[table[./thead/tr/th/text() = 'stdev']]/preceding-sibling::th"
xpath2 <- "//td[table[./thead/tr/th/text() = 'answers']]/preceding-sibling::th"
xpath3 <- "//td[table[./thead/tr/th/text() = 'Reference']]/preceding-sibling::th"
These find the td node that is at the root of each of the three table types, then locate the preceding th sibling with the text you want.
So to get "text_that_I_want_to_get" for table type 1, you do:
read_html(url) %>% html_nodes(xpath = xpath1) %>% html_text()
#> [1] "text_that_I_want_to_get"
And you can do the same with xpath2 and xpath3 to get text from table type 2 and table type 3.

Bootstrap Table: data-href doesn't work after re-sorting

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.

Bootstrap : complex table

I have a specific table to display.
It displays an array of objects.
My object contains:
common data (displayed in black in the table)
'income' specific data (displayed in red in the table)
'depense' specific data (displayed in green in the table)
I did something that looks like what I want but I'm not sure I did it in the clean way.
plunkr
<table border=1>
<thead>
<tr>
<th></th>
<th colspan=5>Depense</th>
<th colspan=5>Income</th>
</tr>
<tr>
<th rowspan=2> id invoice</th>
<th>title1</th>
<th>title2</th>
<th>title3</th>
<th>title4</th>
<th>title5</th>
<th>title6</th>
<th>title7</th>
<th>title8</th>
<th>title9</th>
<th>title10</th>
</tr>
<tr>
<th>depense1</th>
<th>depense2</th>
<th>depense3</th>
<th>depense4</th>
<th>depense5</th>
<th>income1</th>
<th>income2</th>
<th>income3</th>
<th>income4</th>
<th>income5</th>
</tr>
</thead>
<tbody>
<tr >
<td rowspan=2>id invoice : 10</td>
<td>10/02/2015</td>
<td>tartenpion</td>
<td>II</td>
<td>AA</td>
<td>1.25</td>
<td>FRED</td>
<td>fact 12</td>
<td>10</td>
<td>13</td>
<td>xx</td>
</tr>
<tr>
<td>avoir1</td>
<td>avoir2</td>
<td>avoir3</td>
<td>avoir4</td>
<td>avoir5</td>
<td>vente1</td>
<td>vente2</td>
<td>vente3</td>
<td>vente4</td>
<td>vente5</td>
</tr>
</tbody>
</table>
Plus : in order to display each record on two rows I had to add a column called "id invoice", then as I don't want it to be display I added some css to hide it.
I am pretty sure my code is dirty, but I don't know how to do that another way.
If someone can help me on this...

Changing CSS classes within Ember and SortMixin

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.

href cell in a data grid Dojo

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

Resources