I use tablesorter (mottie's fork v2.23.0) by the gem jquery-tablesorter-rails
I have a table where I use the classes filter-select filter-onlyAvail to get a dropdown of only available options in the column.
Recently I added jeditable to the column which adds a script tag to the cells (and maybe also embed the value in a span) like this:
<td>
<span class="editable" data-id="15" data-name="user[route]" title="Click to edit..">1</span>
<script type="text/javascript">
...script for jeditable....
</script>
</td>
The result is that the select filter dropdown shows all variants of values including the script contents.
I tried using filter_selectSource with the filter-match class added, but the contents of the filter is so common (like 1,2 99 etc) I get lots of false hits in the script.
Any pointers on how to ditch the contents of the script tags both in select population and in search results?
I ended up using data-text="value" on the element I want to use for filter and sorting.
In my case the tag.
This does not, however, update tablesorter's filter values or search content for an updated cell.
Use the filter_selectSource option to populate the filter dropdown.
Set it as an array
filter_selectSource : {
0 : [ "abc", "def", "ghi", "xyz" ]
}
or a function:
filter_selectSource : function(table, column, onlyAvail){
// get an array of all table cell contents for a table column
var array = $.tablesorter.filter.getOptions(table, column, onlyAvail);
// manipulate the array as desired, then return it
return array;
}
Also, since it is not ideal to have inline scripts in table rows which are dynamically sorted, please check out the editable widget which uses HTML5 contenteditable to allow user interaction.
Related
I need to have a filter on my kendo grid for check box.
The checkbox is a Non-Bound column. Using checkbox I select the corresponding row.
I need to have a filter to get all the rows which are selected and not selected on the checkbox
columns.Template(#<text> </text>).ClientTemplate("<input type='checkbox' class='chkbx'").Title("Select");
Kindly help....
The best way to achieve such functionality is to extend your data source and add boolean column in your datasource definition. Then you will able to apply custom filter like this:
dataSource.filter({ field:"Field", operator: "eq", value: true });
As far I know - there is no build kendo way to manage filtering unbounded columns.
I am using Thymeleaf and have a requirement of displaying labels dynamically based on database hit.
Suppose we have a column "Race" in our database and table name is "Table1" and the corresponding entity name is "Table1". When user access the html page (home.html) which will hit the table and return the values of field "Race". So if table has 2 values then 2 labels would get display on the page with the values on them and if there are 3 values then 3 labels respectively. I need a Thymeleaf or js code to implement this.
Please help and thanks in advance.
First of all you need proper controller:
#RequestMapping("/home")
public String showHome(Model model) {
List<Table1> list = //Invoke method to get proper rows from db for example use Spring CRUD Repository
model.addAttribute("list", list);
return "home"
}
Inside of your HTML put:
<label th:each="entity: ${list}" th:text="${entity.race}"></label>
I have a drop down in my view. Say the selected value is 1, I want to show the next field as textbox.
#f.FormGroup().TextBoxFor(model => model.Parameter)
If the selected value is 2, then i need it as a dropdown with a list of values.
#f.FormGroup().DropDownListFor(model => model.Parameter, Model.ForumList)
If the selected value is 3, then i need to hide the parameter.
What is the best way to acheive this?
Thanks in advance,
Vanitha.
Add a function inside javascript that should be called onChange event of your dropdownlist. Pass the value of dropdown to that on change function and use if condition to decide which element to show, for this purpose you can keep a div and append elements inside it on runtime
function myfunc(dropValue)
{
if(dropValue==1)
document.getElementbyId('yourdiv').innerHtml=//the html for your element in ''
}
I need to dynamically create (insert) a new table row every time user presses button (using Ajax). My partial view structure:
<tr>
<td><td>
<td><td>
...
</tr>
When I need insert new row at the end I can do something like this:
element_table.innerHTML += ajax_data
But what I must do when I need to place it between other rows?
I can return only [td] elements and wrap them in [tr] clientside created element (tr.innerHTML = ajax_data) but I don't think this is a good idea.
Any ideas?
Are there any common practises?
The easiest way is to use jQuery with your Ajax response. It can be as simple as
$('#table').append(response)
to append a row. It's also possible to insert the new row at a specific index:
$('#my_table > tbody > tr').eq(index).after(response);
Note that index is 0 based.
Iam using Asp mvc. I have this table,which is a dataTables,
in my page, columns of the table sometimes appear or not, depending on the users authotrization.
e.g i have this table with checkbox(it appears dynamically and is on the left-most column), that i want to be not sortable.
i also wanted to sort the first column in the left on default.
So whether, checkbox appears or not, i want the first non-check box column to be sortable.
Is this possible?.
I know this question has been here for long, hopefully you got it resolved.
I am not sure I get it clearly, but my advise is that you look at this page for ideas on how you can control sorting using datatables.net:
http://www.datatables.net/release-datatables/examples/advanced_init/sorting_control.html
If you use one of the DataTools you can even control which columns show or give users the opportunity to select the columns they want to see.
Look at the examples here:
http://www.datatables.net/examples/
By this code you can sort individual columns on datatables by adding class 'sort-desc' or 'sort-asc' for sorting ascending and descending on page load
$('.dom-table').each(function(index) {
var sort_column=$('.dom-table thead tr').children().index('.sort-desc');
var sort_oper='desc';
if(sort_column < 0)
{
var sort_column=$('.dom-table thead tr').children().index('.sort-asc');
sort_oper='asc';
if(sort_column < 0)
{
sort_column=0;
}
}
$(this).dataTable({
"sDom": 'T<"clear">lfrtip',
"aaSorting": [[sort_column,sort_oper]],
});
});
I have not tested this code but it should work.