Highlighting rows with DataTables (or other table/grid plug-ins) - javascript

There's an example in DataTables for highlighting rows on hover:
http://datatables.net/examples/advanced_init/highlight.html
However, I'm looking for something a bit different. I'd like the highlight to be trigged when users click on words outside the table. For example, in the above link, I'd like row #2 to be highlighted when a user click on "visibility" in the text above the table (so it's kind of a hyperlink).
I'm assuming I can find an highlighting plug-in that maybe can do what I need. But before
I got there, is there any easy way to do this with DateTables or other table/grid plug-ins?
Thank you!

Here is an example of highlight on click.
It also has an example of deleting a row on click from a link outside the table.
EDIT: This example won't do exacly what you want, but it get's you most of the way there. I have retrofitted the example in this fiddle to do what you want. Here is the "click link to highlight row" part of it:
$("#rowHighlightLink").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$('#example tbody tr').eq(1).addClass('row_selected');
});

Related

Xcrud button to search for predefined word and predefined column

I am using Xcrud Version 1.7
https://www.xcrud.net/
And would like use a button to search/filter for a predefined keyword and column. In the Xcrud Documentation I found buttons with tasks like edit and modal but nothing with search.
the idea is something like this
<button onclick="Xcrud.request('.xcrud-ajax',Xcrud.list_data('.xcrud-ajax',{task:'search',field:keyword}))">Filter Keyword</button>
The documentation has some button functions but I cant get something work with search.
https://www.xcrud.net/demos/index.php?page=js_tricks&theme=default
I need somehow a solution to filter the table data without reloading the entire page and their for use the js function from xcrud instead of loading the entire page again. Maybe somebody worked with xcrud already and has an idea.
thank you in advance
I solved it myself with my own little function. It might not be the slickest solution but it works well and like this you can have direct any buttons or menu entries with automatic search in specific columns or all column for phrases.
You then connect your button/link with a simple onclick or like this:
search_xcrud('phrase','colname');
Here the function:
function search_xcrud(phrase, col=''){
console.log('Xcrud Search Started: ' + phrase+ ' Col: ' + col);
$('input[name ="phrase"]').val(phrase);
$('select[name ="column"]').val(col);
$( '.search-go' ).trigger( "click" );
}
You can use the function without "col" and than the function searches in all columns.
If you search for a specific column you need to enter the name of the table with the exact label as used in $xcrud->columns!
Example:
If you use for example table "clients" with the columns id,name,age.
$xcrud->table('Clients');
$xcrud->columns('id, name, age');
You would call the function like this:
search_xcrud('myphrase','Clients.name'); // incl. tablename and colname!
If you have doubts about the right column check your source code and look for the select box with the name "column" for all your options in this situation. This depends on the use of relations etc. and might change in this cases.
I hope this helps others since I was looking since quite some time for a easy solution without somehow touching the original Xcrud code. PS: Xcrud is fantastic!
if you have any questions let me know.

Expand/Collapse table data

I've started a deep dive in to HTML + CSS + JS for the past couple of days and I'm curious to know is it possible to expand and collapse rest of the table data if I click my first table data on my table row.
I've tried myself using multiple combinations but couldn't succeed so I wanted to understand is it really possible or I have to improve further :)
Thanks!
https://jsfiddle.net/p9mtqhm7/553/
If I click on say - AUSDe451 or AUSDe441, rest of the corresponding columns should be either expand or collapse[i.e LAMP 6.93817139 & 51_REGALIA 456.352] should expand/collapse if I click - AUSDe451]
Your click handler is a bit wrong!
When you're handling clicks on the .server-name element, $(this) inside the function refers to the item that has been clicked, in this case the .server-name table row.
When you run $(this).find(...), you're looking for child elements of the table row, which do not exist. So rather than use $(this).find(...), you should probably be looking elsewhere in the DOM.
Also, you seem to be searching for span elements, which don't exist anywhere in your HTML markup, so that part of the function will never return anything anyway.

HTML table- Create pop up box for each <td> and display xml data

I am working on a project and I am trying to create a web application. So far, my code is like this example. I press the button and a table appears. As you can see in the example, this table contains data of an XML file. THE PROBLEM: I want by clicking each 'td', a popup box to appear. This box will contain different data for each 'td', from the same XML file. Specifically, it will contain an image and some text that refers to the 'td'. Actually, I want something like this. I tried adding this code to my code and I created a popup button in every 'td'. But clicking these buttons, nothing happens. It would be nice if you share your knowledge with me!
i think its help full for your logic.
$('td').click(function () {
$("#MyModal").modal("show");
});
you can assign a class to td , and by click of that id with jquery modle called by
$("#MyModal").modal("show");
checkout this example
P.S. i have used bootstrap model for popup, but any other can be used with minimum change in code.

Table drag and drop (holding only one column)

I wanted to do draggable table rows, I found TableDnD jQuery plugin and it works fine
$(function() {
$("table").tableDnD();
});
As you can see there:
http://jsfiddle.net/drBfS/1/.
But I wanted to make only one column draggable. I mean, whole row (tr) is moved like now, but you can move row only by dragging left column (td.drag), when trying to drag right column it should be no effect. Have you got any idea how it can be done?
It appears that this is an older plugin, where it might have been possible to do this at one point, according to this document: http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
However, after looking through the source now, it is no longer possible. Instead, perhaps consider simply using jQuery UI sortable. If you wrap your rows in a tbody, this code will get you what you want:
jQuery(function () {
jQuery('table tbody').sortable({ handle:'.drag' });
});
Unfortunately, it's not possible with the TableDnD plugin. That plugin was designed to enable row dragging, not column dragging.
From the documentation:
This TableDnD plugin allows the user to reorder rows within a table

Javascript delete html table row

I dynamically create an html table and one of the cells in each row stores a button that I want to delete that row when pressed. What are my options in knowing what table row to delete from the delete button pressed?
Am I somehow able to get the row that the button is in? Maybe then inside the click I could use the events 'this' property to get the button and then find out which cell it's in, and from there which row that cell is in? Not sure how I'd go about doing that though.
if you are using jQuery this will be a sample code on how you can achieve this.
$('#my_table_id').on('click', 'button', function() {
$(this).closest('tr').remove();
});
hope this helps, best!
Put this in the button's onclick handler:
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
Can be done with native JS, but here is a jQuery solution. Be sure to clone(true) to ensure your events are preserved.
<tr><td>hello</td><td><span class="deleteMe">Delete</td></tr>
$(".deleteMe").click(function(){$(this).parent().parent().remove();});

Categories

Resources