How does DataTables row-selector work? - javascript

I have a datatable with a number of rows:
var table = $('#mytable').DataTable(...)
And I'm trying to find the rows that contain <a>'s with specific data values.
From the documentation, I'd expect is that table.rows('<magic row-selector>') to work, for some value of <magic row-selector>. But even the simplest selectors don't seem to work the way I'd expect them to.
The docs say that if I pass a string to rows(), it is treated as a JQuery selector operating on the the <tr> elements.
http://datatables.net/reference/type/row-selector
Now I know for certain that each of these rows contains a number of 's - I can see them in the debugger if I examine the outerHTML of the elements returned by table.rows.nodes(). So I'd expect that this would return all rows:
table.rows('a')
But it returns none.
What am I not understanding?
What selector should I use, to find all of the rows that contain <a>'s with a specified value for a data attribute?
edited in response to answer
davidkonrad's answer provides some help - I need to pass a jQuery selector object, rather than a string.
Unfortunately, it seems that I need to construct the jQuery selector object before I define the table. I'm not sure I understand why, it seems an unreasonable restriction, but playing around with his fiddle, I did see differences in the rows returned by table.rows(selector) between when I defined the selector before or after I initialized the table.
In my case, then, that makes this approach unusable, because what I'm trying to do is to remove rows that have certain values set in data attributes. There is no way for me to know what values the user might have selected before I construct the table.

I also think the documentation is a little bit cryptic on that point :) The meaning is
By "jQuery selector" there is meant "the jQuery object returned by a $(selector)"
Only jQuery objects containing <tr>'s is allowed
On paginated tables, you must create the "jQuery selector" before instantiating the dataTable
So, if you want to pass a jQuery object to a dataTables API instance, that contains all rows where any <td> contains the text "test"
var selector = $('tr:contains("test")');
var table = $('#example').DataTable();
var rows = table.rows(selector).data();
//now you can iterate
for (var i=0;i<rows.length;i++) {
//each rows[i] is an array of the rows columns
console.dir(rows[i]);
}
if you want to pass a jQuery object to a dataTables API instance, that contains all rows where any <td> contains an <a> containing a certain text, like "test"
var selector = $('tr a:contains("test")').parent().parent();
...
var rows = table.rows(selector).data();
...
the above selectors in an example -> http://jsfiddle.net/q2p2n23m/

Related

querySelectorAll returns me all elements that include the :not(class)

Note: I will only accept pure js answers, not jquery or any other js library.
I have a onchange method attached to a selector
const filter = (element) => {
const value = document.getElementById(element).value;
elements = document.querySelectorAll("table:not("+value+")");
console.log(value, elements, "table:not("+value+")");
}
We get the element's value which in this case could be of two options: is-room-type-false and is-room-type-true. These classes are attached to every single table on the page (there could be hundreds) When I run this and get the console.log
I see:
is-room-type-true // Selected value
8200 tables, node list. // The list of elements that supposedly do not contain this class.
Inspecting the giant array is showing me:
0: table.is-room-type-false.venue-id-1
1: table // Child should not be here
2: table .... (repeats for children tables) // none of these should be here.
x (some number later): table.is-room-type-true.venue-id-1 // Should not be here ...
I wonder if its because of the second class attached to tables(?)
The tables can have nested tables, so I need just the parent tables (if possible) to come back, not their children.
Also as you can see from the sample output, my value is is-room-type-true but as we can see not only do I get children back, but also tables with the class in question when I specifically stated: tables WITH OUT this class.
So the question is:
Whats wrong with my JS function to return me every single table including ones with the class applied.
How do query such that my node list only shows parent tables? (if possible)
The idea is to then take these tables that do not have said class that was selected and then hide them:
[].forEach.call(document.querySelectorAll("table:not("+value+")"), function (el) {
el.style.visibility = 'hidden';
});
But if I add this code to the above function, ALL TABLES hide (which is wrong)
Thoughts?
"table:not("+value+")" needs to be "table:not(."+value+")" so that it treats value as a class name.

Kendo Grid, in dataBound call accessing original bound line

In a kendo ui grid, in the dataBound call, you can access the original data using the below
e.sender.dataSource._data
This looks like it's intended to be for internal use only, and it doesn't tell you which data row was used to generate the current line
My question is, is there any to access the original data inside this call?
I can think of two ways but neither is ideal
(1) Stick some data in a cell(s) and access it using the below
var rows = this.tbody.find("tr.k-master-row");
var innerHTML = row.cells[row.cells.length -1].innerHTML;
You could put a Guid in here and use it to find the original row
(2) As above but json encode it so you get an object to deal with, the json object would contain everything needed
Is there a better way?
Incidentally, what am I trying to accomplish? The row I am binding to has an override cssclass for the row which controls the row's tds styling. I am setting it in the dataBound call. There may be a better way to accomplish this
thanks
OnaBai has answered this, here are the specifics.
NB I'm not stating this is the best way in general to do this, in my specific example its just easier
dataBound: function(e)
{
for(var i=0; i<rows.length; i++)
{
var row = rows[i];
var dataSourceRow = this.dataSource.getByUid($(row).attr("data-uid"));
$(row).addClass(dataSourceRow.RowCssClass);
}
}
There is actually such GUID. Each row has a unique id field called uid that is accessible both in the model via uid member as well at HTML level by doing row.attr("data-uid") or using jquery.data.
So, if you have your row element it would be something like:
var item = this.dataSource.getByUid($(row).data("uid"));
or even if row is already a jQuery object then:
var item = this.dataSource.getByUid(row.data("uid"));

querySelectorAll to find matching data-attribute

My app uses a Parse backend to keep a running list of all the concerts in my area that my friends and I are interested in.
On the main page I use a parse query display a module for each show stored in the database. As each module is created, I use this code to add a data attribute to the show's outermost div, corresponding to the show's object ID in parse:
var showId = object.id;
$("div.show_module:last").data("showId", showId);
I'm successfully able to retrieve the showId of a specific show when the user clicks on the show's module:
$("#showsList").delegate(".showModuleBody", "click", function() {
var storeObjectId = $(this).closest("div.show_module").data("showId");
});
That all works great, proving that assigning the data-attribute is working.
Where I'm running into trouble is trying to find an element with a specific data attribute or a specific value for that attribute on a given page. The end goal is to get the y-offset of that div so I can scroll the page to the appropriate spot. I assumed I could use the following code to find the element, but it isn't working -
// find all elements with class .show_module
var allShows = document.querySelectorAll('.show_module');
// find all elements with showId data attribute
var showsWithShowId = document.querySelectorAll('[data-showId]');
// find all elements with a specific showId data attribute
var showToFind = document.querySelectorAll("[data-showId='2']");
The first of those 3 works, proving that all the elements I'm interested in are loaded into the page by the time I'm calling this function, but the 2nd and 3rd queries return nothing.
Any idea what I'm doing wrong here? Is it something with syntax? Is querySelectorAll just incompatible with how I'm setting the data attribute?
I tried to include only what I figured are the salient bits of code, but if more is necessary please let me know.
Try This
$('*[data-customerID="22"]');
For more info, look here:
Selecting element by data attribute
jQuery's .data method does not create a HTML attribute, but associates a value in its internal data store with the element.
If you want to set a data attribute with jQuery, then you need to use:
$("div.show_module:last").attr("data-showId", showId);
To get the value, you can use .data('showId') or .attr('data-showId').
(note that HTML attributes are case-insensitive, so you can also write "data-showid" instead.)

How to sort a a table with Javascript without library?

There is two main aims:
Sort table of data using javascript without libraries such as jquery, so pure javascript.
Sort/group rows together based on class/id (like css).
I thought maybe getElementById could be useful, but don't know enough javascript to investigate properly.
A table's rows can be found in the rows[] array of said table.
You can create an array containing those rows.
You can then .sort() the array based on a callback function that looks up certain info, in the form
.sort(function(a,b) { /* return -1 if a comes before b or 1 if b comes before a */ })
If you iterate over the array and appendChild the rows to the table they are in, the result is a sorted table.
If you have problems with the actual code, please post what you have so far and we can help more specifically ;)

Coping data in number of rows

<script>
function copy_data(val){
var a = document.getElementById(val.id).value
document.getElementById("copy_to").value=a
}
</script>
i am using this code in head portion for copying data from one text box to another. I need to know what can i do to copy data in number of fields in different rows to copy data from one column to another of the same row?
You can choose among popular javascript libraries and use their css based selectors to query your fields. A couple of examples:
JQuery's $: http://api.jquery.com/category/selectors/
dojo.query: http://dojotoolkit.org/reference-guide/dojo/query.html
As a result of the query you obtain an array like object (depending of the library) which gives you the ability to iterate over, and do your copying.

Categories

Resources