I'm using jquery datatables plugin. (https://datatables.net/) I wanna know if there's a way to change the TD class when the tables is empty.
From what I saw when there are no rows in table datatables inserts a row with a TD with class dataTables_empty . Is there way to change *dataTables_empty* to *myDataTables_empty* ?
I'm using fnRowCallback to change other rows classes... but it seems that this is not working for the auto inserted row when the table is empty.
you could change it using jQuery quite easily.
in your (document).ready handler...
$('.dataTables_empty').removeClass('dataTables_empty').addClass('myDataTables_empty');
Alternatively you could just use the default class name and override it in your CSS.
Otherwise, take a look at the datatables doco...
Related
I need to select the header checkbox when all the rows are selected.
I used logic to keep a count of the number of rows checked if it's equal to row_count,I need to select the header checkbox
The problem is I cannot access the header checkbox through DOM because of the browser restriction
I'm using the following jquery code to get it worked but it's not working as expected
var check_box = fw.component_helper.get_table_column_editor(fw.form_constants.CHECK_BOX);//header checkbox
$("check_box").attr('checked',true);
Note: fw is my own defined framework
Please suggest what's wrong with this approach
use prop instead of attr. What is "$('check_box')". Define weather it is class or id. you selector is wrong here I thing this could be problem.
$(".check_box").prop('checked',true);
or
$("#check_box").prop('checked',true);
or
$("input[type='checkbox']").prop('checked',true);
I"m working on an asp.NET project. My code-behind page binds to a repeater control that fills a table on the page.
I've hidden the table with CSS while it's empty. I'd like to use jQuery to make the table visible when the repeater fills it, but I'm having trouble making that work. Here's a bare-bones example:
$('#MyTable').change(function () {
$('#MyTable').show();
})
I'm using a plain HTML table, not an asp:Table, so I don't need to use the .ClientID workaround and I can't manipulate it on the server side. I've also tried putting the .change event on the repeater control, but that doesn't work either. The table stays hidden after the new rows are added.
Can anyone suggest a way, hopefully straightforward, do do what I'm trying to do?
The change event fires for combobox, listbox when selected index fired, i dont't think it will fire when you append tr to tables.
However, you can have work around for this, take a asp:panel or simply a div that will contain your html table, and you can set this panel visibility to true when you append rows in your html table.
If you use plain HTML table, change will not work, try this solution:
HTML table onChange
you can use the livequery plugin which will detect the DOM change.
first add the livequery plugin to the page and then try this
$('#MyTable tr')
.livequery(function(event) {
$('#MyTable').show();
return false;
});
hope this helps.
I have a custom sort on a few columns of data in my grid. I'm trying to hide some of the rows of data based on their value while I'm doing the sort. In the function, I have the cell value and the row object, but I don't see the row ID which is what I was going to use to hide that row of data. Is there a way to get the row ID, or is there a better way to attack hiding rows while sorting?
The grid content will be reloaded during sorting. So you can use rowattr to set some attributes on the rows. Inside of rowattr callback you have access to the object which represent the data of the row. Look at the answer. It adds CSS class myAltRowClass to some rows based on the content from one specific column. You can do the same. You need just defines display: none to CSS class myAltRowClass. Alternatively rowattr callback can return {"style": "display: none"}; on some rows.
I'm trying to hack the tablesorter jQuery plugin with no success. What I'm wanting is this...
I have a table (list of sports teams) and a row is set to a specific class. This basically is to show qualificatoin for finals series, so it must always STAY in that place. eg. if someone sorts the table by wins, I still want the 8th row to have the class I gave it at the start with this:
$("table.ladder tr:nth-child(8)").addClass("finals");
As tablesorter is at the moment, when the table is sorted, this TR obviously moves around. What's the best way to make tablesorter KEEP the nth row like this?
Hope this makes sense!!
tableSorter has a under-documented internal function called 'sortEnd' that you can bind to...
$("table.ladder")
.tablesorter()
.bind("sortEnd", function(){
$("table.ladder tr").removeClass("finals");
$("table.ladder tr:nth-child(8)").addClass("finals");
})
I'm assuming you only want to move the class, and not the data. if you have a data row that is always supposed to be at the bottom, you can use the <thead/><tbody/><tfoot/> structure and place that row in <tfoot/>
I have a table with a bunch of rows. In the last column of every row, there is a dropdown. When the dropdown changes, I need a new table row to appear below the row where the user selected the dropdown item. However, I also need the new row to have different data depending on what was selected in the dropdown.
Is any of this possible using only jQuery?
Note that I'm using ASP.NET for back-end development, so if a solution can be found without using ID's that would be great.
$("table select").live("click",function(){
var row=$(this).parent().parent();//add some .parent() untill you get the TR element
var val=$(this).val(); //<select> value if you want to use it for some conditions
$("<tr><td>....</td></tr>").insertAfter(row);
})
It's simple enough to add the HTML using JQuery. However, if you intend to save this data back to the server, the default ASP.NET process (using ViewState) will ignore the new rows. Instead, you would need to directly read the submitted form properties.
To learn how to add a row, look at the suggestions here: How to add a new row to a specified table with jQuery?