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?
Related
I have a table built that comes from data in the server. I have a button that will activate or deactivate a category. If the category is active, it will show the action of "inactivate" and so the way around. So I need the table to refresh so when the user clicks activate it will automatically switch. I am almost done with this. Issue is that when I use the jQuery load function, it seems like it's adding one additional line instead of just refreshing it.
This is my code, I send a request to the server, then wait for it to finish to load.
My code is below:
async function cambiarStatus(tipo_transa, ruta, estadoCat, idCat, div, file)
{
await modStat(tipo_transa, ruta, estadoCat, idCat);
$(div).load(file+div);
}
With the table I built with PHP I only have one ... but then it goes and another one which ends up in making the table go nuts.
Many thanks for your help!!!!!
I'm going to have to guess that the value of the variable div is something like #c-i-1, or # plus the id of whichever table row you're trying to replace.
In that case, the code as written is telling jQuery to replace the content of the table row, not the table row itself, with the matching table row loaded from the file. That's going to cause exactly the problem you're showing, a table row being put inside a table row.
You need to replace the table row itself with the retrieved table row. For that, as convenient as jQuery's load method is, it doesn't offer the functionality you need.
Something like this should work better:
$.get(file, table => {
const row = $(table).find(div);
$(div).replaceWith(row);
});
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.
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.
I am using jqGrid for a scheduling process. In the grid, I am displaying the working hours and other details of employees under a department. On clicking a row in the grid, another grid has to pop-up which gives details of the corresponding row in the master grid. For example you can refer to http://trirand.com/blog/jqgrid/jqgrid.html (adanced>masterdetails). This shows an example of two grids where on clicking a row in the master grid you get the invoice details in the below grid. I too need the same functionality and added to it, I have to add/edit the rows in the second grid. Both the grid datatype are local. On clicking submit button in the add/edit dialog I want to override the default action which submits the data to the server, and write my own function. The function is to store the added details/edited details into an object and bind it as a data block to a div.
I tried onclickSubmit, but it was still invoking the default method.
Added to this, i would like to reload the grid with the new row.
for your first problem, what you can do...onSelectRow property of jqgrid you can send the data of that row as local data and load a new grid just below to previous grid
for example, this you can write with first grid
onSelectRow: function(){
var sel_id = jQuery("#grid").jqGrid('getGridParam', 'selrow');
//this will give you id of the selected row
now to get values of the column for this row, there are several methods
i'll go with this one, lets say i have date as a column in this row
so,
var date=getCellValue(sel_id,'date');
and now you can load a new grid in this same function and send this data to that grid
and now your second problem, for the custom functionality of add/edit dialogue you can make use of this event and over ride it
beforeSubmit
check this
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#editgridrow
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.