Apply class to each row in javascript Datatables - javascript

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.

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?

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 override submit button event in add/edit dialog in jqGrid

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

jQGrid, how to add a new row inside the grid, not via a modal?

Some quick searching only turns up adding a new row to a jQGrid via a modal popup with the editable fields.
Can anyone point me to a sample or show me some code that allows you to add a new empty row into the grid itself, at the top?
I have an action column at the rightmost end of the grid in which onRowSelect() I have a save button appear and I can make that button do the save and refresh the grid I think..
I can't figure out how to click on a 'Add Row' button and add an empty row inside the grid at the top.
One option that I can see is to style the current add row modal to look like a horizontal row and place it to appear like its a row at the top of the grid.
jQGrid Documentation: http://www.trirand.com/jqgridwiki/
If you use datatype:'local' then you can use addRowData method to insert the row with position parameter set to 'first'. See some examples under http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#array_data.
This answer is courtesy of Oleg in my previous question here:
use $("#grid").addRowData(rowid,data, position, srcrowid);
Inserts a new row with id = rowid
containing the data in data (an
object) at the position specified
(first in the table, last in the table
or before or after the row specified
in srcrowid). The syntax of the data
object is: {name1:value1,name2:
value2…} where name is the name of the
column as described in the colModel
and the value is the value. This
method can insert multiple rows at
once. In this case the data parameter
should be array defined as
[{name1:value1,name2: value2…},
{name1:value1,name2: value2…} ] and
the first option rowid should contain
the name from data object which should
act as id of the row. It is not
necessary that the name of the rowid
in this case should be a part from
colModel.
P.S. Have a look at my profile for a number of jqgrid questions and answers.

How to hide div if table row is empty?

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.

Categories

Resources