How to hide div if table row is empty? - javascript

I have a table on my page and I want to display a message telling the user that they need to create content before the table is visible.
Currently when the table is empty the user can still see the table headings (article, date added etc).
Using Jquery how would I hide the table and the div containing the table?
Do you know what I mean?

Like this:
$('table:not(:has(ContentSelector))').each(function() {
//This code will run for each empty table.
//`this` will be the <table> element
});
Where ContentSelector is a selector that matches the content in the table.

Related

Datatables "show/hide" function removes table header

I using Datatables to create my tables. I have created a function that on button click reinitialize the table. I want to hide my table while the data are loaded, and then show the table when with all of my data.
I make this :
$j("#tableId").hide();
then when data are ready
$j("#tableId").Show();
This works ok but, when the table is reinitialized the table header is disappeared.
Do you have any example to show me what I do wrong?

Apply class to each row in javascript Datatables

I have a table inside modal that has several hundreds items. Each item row is associated with particular bag. All bags are listed on a page and when user clicks "Add Items" modal opens up and shows all rows.
Now each row contain a class that correspond to its bag. I want to show only those rows that has same class as of that bag. I applied simple jQuery but that function only works on first page and rest of the pages shows all rows.
Is there any built in function provided by Datatables that could be used for this purpose.
So if you have your datatable like this:
var table = $("#myTable").dataTable({
// ... skipped ...
});
You can edit its rows by selecting them with the row() function:
table
.row($(':not(.someBag)')
.remove()
.draw();
As you can see after selecting the rows we can remove them with remove() and the use draw() to reload the table from the cache.
This will delete also the rows on the other pages, not just the one you have rendered in front of you.

Target Dynamically Added <tr>

I've with me the feature of adding new rows to an existing table via the "Add Row" button using plain old javascript. This code was written by someone else and now I'm required to add something more to the existing functionality.
For that reason I need to be able to target the dynamically added rows too but for some reason whenever I do (after adding 2-3 new rows and clicking "Submit" button)
console.log($('table#tableid tbody tr').length);
it is only retuning the number of rows which were loaded during the page load and skipping the new rows that were added dynamically.
Here's the Fiddle to get you started. It's baffling really because I thought I knew jQuery well enough to be stumped by this....
You add new row to tfoot.
Try this:
var tbl = document.getElementById('tblSample').getElementsByTagName('tbody')[0];
At page Load you are having rows in tbody.while the rows you are adding dynamically are adding in .while on button click you are selecting only those rows that are coming in tbody section.

How to make multiple HTML tables sortable?

I am currently using an open-source javascript table sorter: http://mottie.github.io/tablesorter/docs/
The problem I have is that I dynamically add tables to my page in reaction to the user pressing a button. Only the most recently added table becomes sortable and the previous tables are not sortable anymore after I add the new table. Currently, I have this code at the end of my table creation:
//Make table sortable
$(document).ready(function () {
$("#" + thisTable.ID).tablesorter();
});
I don't understand why the old tables lose their sortability if they're not being reloaded. I am only appending a new table with a different ID under the previously added table.
You can change your selector to $('table'), and this will add the sorter to all tables. Your current code will only run on page load though, so you'll have to execute the $('table').tablesorter(); line every time you dynamically add a new table (in your button's click handler).
It would be better though if you added a class, such as sortedTable to every table, and made your selector $('.sortedTable'), rather than simply $('table'), because you may at some time want a table that isn't sorted and the first version will always sort all tables. The second version will only sort those tables that you explicitly mark as sortable.

How to display row contents in dialog box when clicking on the row

I am new to javascript and jQuery. Yesterday I asked this question link and found out how to add rows to table from input values. So now I have a table which will create new rows which will display user inputs. Today I am trying to find out how I can display the row contents in a dialog box when I click on a particular row. Any leads, advice, tutes will be useful. Thanks.
Here is a start:
Whenever the user clicks on this row, the html will be displayed in the javascript default dialog box.
If you want to do more sophisticated processing you could call a function that will process the rows content using the following:
<script type="text/javascript>
function processRow(row){
...
}
</script>
...
<tr onclick="processRow(this)">

Categories

Resources