I have a tab which shows two bootstrap tables (wenzhixin bootstrap tables). One tab shows a table for active equipment and the other in-active equipment.
For now i have done the filtering via 2 different sql statements (one for active equipment and one statement for in-active equipment). But i was wondering if there is a way to do the filtering using the returned result containing all the rows (both active and inactive) for example using the formatter or some other feature which i am not aware of ?
Or is the better solution to filter through sql ?
How i currently set the table data
Currently I need to call getActiveEquipment.php and getInactiveEquipment to get the equipment for my active equipment table and in-active equipmenttable. See below how my table for active equipment looks. Id prefere to call getEquipment, which returns ALL equipment and using that result filter the data put into the tables (active equipment -> table 1 , inactive equipment -> table 2)
<table id="active_equipment-table" data-toggle="table" data-url="getActiveEquipment.php" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" class="table table-hover table-condensed table-striped" data-page-list="[10, 20, 30, 40, 50, 60, 70]">
<thead>
<tr>
<th data-field="type" data-sortable="true">Type</th>
<th data-field="product" data-sortable="true">Fabrikat</th>
<th data-field="acquisition" data-sortable="true">Anskaffelsesår</th>
<th data-field="calibration_interval" data-sortable="true">Eftersynsinterval</th>
<th data-field="equipment_no" data-sortable="true">Instrument nr.</th>
<th data-field="inspection_date" data-sortable="true">Seneste eftersyn</th>
<th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents"></th>
</tr>
</thead>
</table>
Thought this might need my own answer.
Did not find any other alternative for filtering the received data before binding it to my data property of my tables.
So the solution was simply to create the getEquipment.php which is responsible for calling my API and fetch the data, and supply it with an argument for active as such.
getEquipment?active=1 and getEquipment?active=0
The filtering will then be handled in my database handler of my API
Related
I would like to drag multiple <tr>'s up and down a table column at the same time. It's rather straight forward to drag individual rows using <draggable>, however what I'm looking for is a way to group, say, the previous row with the selected row and move them together while maintaining the ability to drag each row individually later.
I'm using Vue 2 and vuedraggable v2.24.3.
The table is as follows.
<table>
<thead>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<draggable>
<vue-component-here
v-for="(task, i) in tasks"
:prop="task.id"
.
.
.
/>
</draggable>
</table>
The sub-component will output a <tr> for each task.
I'm taking first steps with vuejs and came across this issue. I have this data i want to display inside a table, using this quite straightforward piece of code:
<table class="table table-striped table-hover" :class="[hide ? 'thide' : '']">
<thead>
<tr>
<th v-for="(item, index) in _items[0]">{{fixTheaders(index)}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in _items">
<td v-for="field in item">{{item}}</td>
</tr>
</tbody>
</table>
now the problem is that each item stores data in the following form, for example:
{
"cost": "123.324",
"placement": "placement-1",
"date": "2017-03-03",
"device": "mobile"
}
so in this case the table will present data in this order :
cost | placement | date | device
but i want the order to be : date | device | cost | placement
i have a feeling that best way will be to have array :
filters = ['date,'device','cost','placement']
and use it but i couldn't find a vuejs way to handle it.
so, any idea what will considered best practice in vuejs to present the data in a table by the order i set in the array?
worth mentioning that when initialized, the order is determined on the server and fixing it from this side is not an option
Personally, I would just hardcode the headers, and get the correct value in your tbody
<tbody>
<tr v-for="(item, index) in _items">
<td>{{item.date}}</td>
<td>{{item.device}}</td>
<td>{{item.cost}}</td>
<td>{{item.placement}}</td>
</tr>
</tbody>
Unless of course you need more stuff done with them, then a property containing the column keys in desired order is what I would go for indeed :-)
I have this fiddle and you can see that when you input any value for price field , It's popup tip is not positioned on the text because its data type is number as when you input values for Names.
https://jsfiddle.net/6da007fm/21/
HTML
<table data-toggle="table"
data-editable-emptytext="This field is empty"
data-id-field="id"
data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data2/">
<thead>
<tr>
<th data-field="name" data-editable="true" >Name</th>
<th data-field="price" data-editable="true" data-editable-emptytext="For free." data-editable-type="number" data-editable-placeholder="Enter a Number">Price</th>
JS
$.fn.editable.defaults.mode = 'popup';
Is it a normal behavior or there is any workaround to this. I am using this in my project web page and it has 5 columns in one row and is not looking very neat because of this.
-Thanks
you just need to override popovers core css
.popover{
left:190px!important
}
here is your updated fiddle Working demo
I have a set of survey questions each of which I am arranging in a single row table. I want the first entry to serve as a prompt and have been using <th> for that cell, as in:
<table style='width:100% table-layout:fixed;border-collapse: collapse;'>
<tr>
<th style='width:40%'>
<b>How long were you on active surveillance?</b>
</th>
<td style='width:10%;'>f3_watchtime_num</td>
<td style='width:5%'></td>
<td style='width:50%;>f3_watchtime</td>
</tr>
</table>
It seems to work OK but I have some reservations and questions about mixing <th> and <td> cells in a single <tr>:
Is this HTML5 Standards compliant? (Is there a W3C document that allows or prohibits this practice?)
Are there any downsides to this practice?
Thanks,
David
1. Is this HTML5 Standards compliant? (Is there a W3C document that allows or prohibits this practice?)
W3C tr reference says it's content model can contain:
Content Model:
Zero or more td, th, and script-supporting elements
https://www.w3.org/TR/html5/tabular-data.html#the-tr-element
While your usage isn't very common, there isn't anything in W3C that forbids it.
2. Are there any downsides to this practice?
As for the use of th and td together, its accepted by W3C provided they are children of a tr element.
However, if you are displaying tabular data, (i.e. your survey results are data) using a table is fine. If you are using the table for layout purposes, you should use a CSS based layout instead.
The recommendation of W3C is avoid to use tables for layouts. It is valid only for displaying ordered data, but that's not your case. You can achieve the same with <div> and will be semantically correct.
Other thing is your question about mixing. I think if you don't write <tbody> and <thead> tags, you don't separate the content for the headers in the table, so that's correct because there aren't <td> tags inside a <thead> and there aren't <th> tags inside a <tbody>.
However, it's better practice if you don't use tables for this purpose.
I have an issue with selecting a table to be read in Selenium.
I have a table in which there is two 'tr' elements inside the 'thead', and I need to find a way to ignore the first of these.
Here is the code:
<table class="noselect">
<thead>
<tr>
<th> </th>
<th class="number IOL">Interest Rates</th>
<th class="number IO">
</tr>
<tr>
<th>Description</th>
<th class="number">Value</th>
<th class="number">Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<tr class="">
<tr class="">
<tr class="">
<tr>
<tr>
</tbody>
</table>
Using Selenium I will ask it to record the value of a certain row and column . This will then look at the Table element I will give it (hopefully using an XPath I can get working in this case), look at the thead and record the headers of each column. In this case that I am struggling with, the fact there is an extra 'tr' at the top of this table gets in the way of this process.
This is how the element is currently used:
[TableAlias("Detailed table")]
protected virtual IWebElement DetailedTable()
{
return Driver.FindElement(By.XPath("//table[#class='noselect']"));
}
I have tried many different ways which I can't get to work, but the gist of what I've been going for is:
//table[#class='noselect movements']/thead/tr/th[not(text()='Interest Rates')]/../../..
Here I'm stuck on going to the 'tr' element, telling it not to use it then backing out, but that selects it back again - and even that doesn't unselect the whole 'tr' element. It doesn't seem to help (to me) that the 'tr' element I'm trying to remove is blank with no class or defining features.
Is there a way of selecting the entire table except for the first 'tr' element in 'thead' as one element?
combine two xpathes. The 1st xpath take thead without the 1st tr and the 2nd tbody
//table/thead/tr[not(position()=1)] | //table/tbody
In your function that processes the THEAD tag, get the collection of TRs and start with [1] (skipping [0]) and process the rest.