In a Rails app, I'm using dataTables and a columnFilter.js.
I want the column search to be at the top of the dataTable and not the bottom.
So, I added this in the js:
.columnFilter(
sPlaceHolder: "head:before"
And I added a 2nd row to the header, like this:
<table class="display dataTable table table-striped table-bordered" id="dataTable1">
<thead>
<tr>
<th>Search</th>
<th>Search</th>
<th>Search</th>
<th>Search</th>
<th>Search</th>
</tr>
<tr>
<th>Date</th>
<th>Desc</th>
<th>Client</th>
<th>Project</th>
<th>Employee</th>
</tr>
</thead>
It looks fine on my Mac:
But, on Heroku the table rows are switched:
Related
Is there a way to make the HTML table as data source for highstock chart type of highchart lib ?
You need to define dates instead of categories.
Example:
- http://jsfiddle.net/ysxo739h/
<table id="datatable">
<thead>
<tr>
<th></th>
<th>Jane</th>
<th>John</th>
</tr>
</thead>
<tbody>
<tr>
<th>2006-01-01</th>
<td>3</td>
<td>4</td>
</tr>
<tr>
<th>2006-01-02</th>
<td>5</td>
<td>6</td>
</tr>
</tbody>
I'm using JQuery Mobile 1.4. How can I set the column hide or unchecked on table load.
Here is part of my code:
<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
<thead>
<th>Movie Title</th>
<th data-priority="1">Rank</th>
<th data-priority="2">Reviews</th>
<thead>
<tbody>
....
</tbody> </table>
How do I hide the Reviews column on default or unchecked it in Column option?
There is probably an easier way, but this will work:
Given your table markup:
<table data-role="table" id="myTable" data-mode="columntoggle" class="ui-responsive table-stroke">
<thead>
<tr>
<th>Movie Title</th>
<th data-priority="1">Rank</th>
<th data-priority="2">Reviews</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
jQM will create a column toggle popup with 2 checkboxes, one for rank and one for reviews. Because you did not assign a data-priority to movie title, it is not allowed to be hidden. The popup takes the id of the table plus '-popup', so in my exaample we can find the checkboxes in the created popup with the following selector:
$("#myTable-popup .ui-checkbox label")
As you want to hide the Reviews column by default, we can simply trigger the click event on the second checkbox at pagecreate time:
$(document).on("pagecreate", "#page1", function(){
$("#myTable-popup .ui-checkbox label")[1].click();
});
Here is a working DEMO
I'm using datatable plugin but having an issue with the sorting. default sorting order is asc and i want data in descending order when the page is loaded.
following is the script i'm using for initialization:
jQuery(document).ready(function(){
App.init();
});
also tried to use this
$('#sample_1').dataTable();
but it effects the menus. Menu sliders stops working and datatable also not working properly with this.
and there is no error in console.
Thanks
Without seeing your init code and HTML, we can't really point out what is going wrong.
If your table is visible before the DataTable is initialized, then you'll need to make sure it is sorted correctly in the original HTML.
When initializing the DataTable you'll want to set up the initial sorting - e.g. for descending sort on the first column:
$table = $("#sample_1").dataTable({
"aaSorting": [[0, 'desc']]
});
Here is the HTML:
<table class="table table-striped table-bordered adjust_table" style="table-layout:fixed;" id="sample_1"><thead>
<tr>
<th class="">Order ID</th>
<th class="">Name</th>
</tr>
</thead>
<tbody>
<tr>
<th class="">2001</th>
<th class="">John</th>
</tr>
<tr>
<th class="">2002</th>
<th class="">Marry</th>
</tr>
</tbody>
</table>
And following is the init code:
App.init();
I have a long column attribute in my table, it is a token, and I want it to be displayed in two rows instead of one since the token is taking a lot of table space.
For example: "44b4bf4c01261542c9e34701fe435e55"
Code snippet:
<table class="table table-striped table-hover" id="admin_data_table">
<thead>
<tr>
<th>request</th>
</tr>
</thead>
<tbody>
<tr>
<td><%= #request.token %></td>
</tr>
<tbody>
</table>
How can I make this long value 44b4bf4c01261542c9e34701fe435e55 shorter for example to be like:
44b4bf4c012615
42c9e34701fe
435e55
You could use String's scan method to break it up into bits and then join it back together. Here's an example breaking it up into a maximum of 15 characters per line.
> str = "44b4bf4c01261542c9e34701fe435e55"
=> "44b4bf4c01261542c9e34701fe435e55"
> puts str.scan(/.{0,15}/).join("\n")
44b4bf4c0126154
2c9e34701fe435e
55
This is a frontend view concern. You should use HTML or CSS to deal with the width of the column instead of transforming the data itself.
You can do so by setting the HTML width, for example:
<table class="table table-striped table-hover" id="admin_data_table">
<thead>
<tr>
<th width='10%'>request</th>
</tr>
</thead>
<tbody>
<tr>
<td width='10%'><%= #request.token %></td>
</tr>
<tbody>
</table>
You could use css by:
admin_data_table .token-column { width: 10% }
Or if you still feel like transforming the data generated in the backend, you can split the token string with ruby like this:
<%= #token.each_slice(10) # will produce an array of chunks of 10 characters %>
I agree this is a front-end concern. You could try this in your css
table td
{
table-layout:fixed;
width:20%;
overflow:hidden;
word-wrap:break-word;
}
Hope that helps
In my code they have one table. In that table the row is not fixed. it may added by everyone.
I that table every third column text should be "Pending". It is the condition. I dont know How to check that every third column text have "Pending".
I was trying this. I dont know weather its right or not.
page.should have_selector('tbody tr td:nth-child(3)', text: Pending)
Its my html
<table id="thisis" class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Default</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test1</td>
<td>true</td>
<td>
<span class="label label-success">Pending</span>
</td>
<td>
<span>View</span>
<span>/</span>
<span>Edit</span>
<span>/</span>
<span>Publish</span>
</td>
</tr>
<tr>
<td>test2</td>
<td>true</td>
<td>
<span class="label label-success">Pending</span>
</td>
<td>
<span>View</span>
<span>/</span>
<span>Edit</span>
<span>/</span>
<span>Publish</span>
</td>
</tr>
</tbody>
</table>
Thanks for your valuable answers.
Method 1: Use count
Say you have 10 rows in a page, and given your status columns have class "status". Then
expect(page).to have_css(".status", text: "Pending", count: 10)
Method 2: Use scope
To code a table with data, a convention is to assign unique id to each row at least. This will help lots of functions not only the test.
What you need to do is:
Assign an unique CSS id with data id for each row
Add a "status" class for status column for easy identifying
You view will look like this
<tr id="123-row">
<td>bla blah</td>
<td><span class="label label-success status">Pending</span>
...
</tr>
Then, for test, you can do this in Capybara:
within "##{item.id}-row .status"
expect(page).to have_content("Pending")
end