I have a datatables table which uses ajax to source some json. At present this is all working well but I would like to add something whereby all rows in the table with a particular attribute, say Highlight=True, have some additional css apllied to them.
I understand it is easy to do this for all rows or selected rows given in html format but I don't see how to do apply it to data on-the-fly so to speak. A more general goal which I am working towards would be to apply some javascript or css to a row based on the data in that row.
Any suggestions?
Cheers,
Jack
Related
Situation:
I'm playing a little by using the Matt Kruse's library I found at the page Table Sorting, Filtering, Etc at the URL http://javascripttoolbox.com/lib/table/source.php.
It works pretty well but I wish to implement a little improvement (maybe it would be better to use the locution "new feature") and I don't know where to start because I'm a newbie in js and that js file uses more advanced programming statements I don't fully understand, not yet at least.
I have a single html file with some tables in it. Some of them are filterable and sortable thanks to that library. The number of tables may vary, the number of columns (fields) in each table may vary as well, and the number of records (rows) of each table may vary as well too. Of course the content is different in each table too.
By placing a specific css class in the th element of the targeted column I choose, I indicate to the Matt Kruse's library to create in that column a html element that is populated of a list of html elements that are computed dynamically by the js it self by picking a distinct and sole value of each record for that column.
When I wish to apply a filter to the table on the basis of certain column, I have just to choose the relative from the corresponding box and the table gets filtered accordingly, as I expect to. It works just hiding the records (the html rows) with not matching criteria in that specific column with a filter applied on it. Of course it is possible to use filters on more than one column at once if needed. It works pretty similarly to MS Excel.
The problem
When I apply a filter to a column the other columns filter drop-down combo boxes (the html elements that contain the compiled options for filtering other columns) continue to show all options instead of hiding those that are filtered in the table and are no more needed. So it becomes pretty tricky especially on complex tables to choose filtering criteria from other columns because the user has to understand by himself what are the criteria that aren't usable because the corresponding rows are already hidden by a filter already applied to another column.
One more thing: when I edit the content of one or more table cells, the filter of the relative column(s) doesn't update to match the editing made, but it seems to be to stay static.
Goal of this question
If I use a spreadsheet (as LibreOffice Calc, or MS Excel, or Google online spreadsheet, or else) when I filter a column other columns' filter drop down menu are filtered as well. If I remove a filter somewhere, other columns filters drop down are updated accordingly.
All this behavior is what I would like to implement into Matt Kruse's library. In this way it would be easier to filter by multiple columns because the boxes containing the filter criteria of the other columns will show just the filter criteria left by the all the previously applied filters.
What I have already tried
I tried to implement something to do that but it was so slow that I was too much ashamed of its execution time that I already deleted the whole algorithm I created.
For comparison using the Matt Kruse's library algorithm implies just few instants to compile all tables data into filter elements (on all tables as well). But the algorithm I've implemented needed more than 30-40 seconds for just one table. Way too inefficient.
Substantially I wrote few "for loops" that for each into each of the filtered table, compares the value of the option with each one of the corresponding column and if finds a mach keeps the option visible, else it hides that element into the . I attached that algorithm to the change event of each , so when I clicked and selected the the event was triggered and all the content of the table was updated. It worked as expected but, as I said, what I implemented was way slower.
So the question is:
How do I modify the Matt Kruse's js file to implement the feature I want keeping the highest possible performance?
(If Matt Kruse is reading this, feel free to pick up this idea and implement the new features needed above: I'm sure it would be greatly appreciated).
Thanks everybody in advance for the contribution.
Two beginner javascript/web design questions rolled into one. I am using twitter bootstrap and I bought two templates to help figure it out and achieve the functionality i want. Both templates provide dynamic tables based on Datatables (ref: http://www.datatables.net/). Both provide examples with hardcoded data. I am looking to dynamically populate the table using JSON data from a server request
One table example has all columns populated, I would like to add an extra column with buttons to perform actions. I am unsure how to do this correctly as the server request will only return data for say 4 columns but I would like to add a new column with buttons for every row. My first though was to have placeholder data in our JSON data which could be replaced with
$('tr last-child').html("<a class-btn>");
or something similar. Is this a good solution? Any ideas would be appreciated.
The second template already has a column with buttons, also filled with hard coded data. IN this case what is the correct way to handle populating this table as the server call will return JSON data with 4 columns of data but the table will have 5 columns (one row of buttons).
Any tips much appreciates.
Cheers
I have an example working here - http://jsfiddle.net/BM3kX/5
It has a piece of JSON consumed by a YUI DataTable. I have a few queries regarding the same.
The JSON has a 'imageURI' attribute from which I need to render an image [16x16] along with the 'showName' attribute in the same cell. Also, the table can have multiple rows so as the images that should be rendered on each row efficiently.
When I click on a row, the table should alert me of the selected record. But there is a twist here - I need the data exactly as the JSON which is used to render it. (I should get even the 'type' attribute even if I'm not using it anywhere in my table.)
How can I meet the above requirements? Any solutions or possibilities?
1) There is not much you can do there. I assume the images are different for each of the records so there is not a lot to optimize except sending the images in the proper size instead of having the client resize them. If the images were some sort of icons representing status, I would recommend you sent the status coded somehow and let the browser decide on how to represent it, but if they are pictures of the people, you'll just have to let the browser deal with them the best it can.
2) It is easy to reconstitute the original data out of the model for the clicked row. You don't need to keep a copy of the JSON for that row, you can turn it into JSON whenever you want (after all, model has a toJSON method to make that easy). The model for each record in a table can hold more information than that shown in the table. The column property tells the datatable what to show, the datasource what it stores. Use getRecord to reach the underlying model and JSON-encode that. If the type was there originally, it will still be there even if you don't show it.
Up to now I have a simple HTML table with an extra column which contains a <ul> element which is marked dropable. I have a list of elements below the table and are able to drag that tags to the specific cell to tag a displayed datarow (with ajax server communication and stuff).
Now I want a more fancy table which allows for column sorting, reordering, searching and paging and have also that simple drag 'n drop (if possible) tagging of specific rows. I'm looking at maybe jquery datatable or flextable (or similar powerful library) and add a column which allows that kind of dynamic editing.
I see at least two options: Try to implement drag'n drop inside the table to have the same as before or try to write a cell editor which uses a "tag" library (for example http://tagedit.webwork-albrecht.de/ ) but I would need a library which lets you only choose pre-existing tags easily.
My question: Is any of this two options possible, and if, how? Or is there a more "out of the stock" option to do that?
I have a set of tables in a build that use the Tablesorter 2.0 jQuery plugin to sort columns of data. It works perfectly fine until I get to a more complex table that has multiple TH rows.
Tablesorter 2.0 automatically detects the first set of THs and makes them the sorting trigger. There's no way to override this with a selector.
My complex table has multiple TBODYs with rows of THs on top like so:
I'm going to give www.datatables.net a go to see if it has a way around this but I'm worried I could run into JS conflicts with both plugins running on the site.
Any other suggestions of how to achieve table sorting within each TBODY using the row where you see 'My Equity' as the sort headers NOT the dark grey header row at the top?
An example of the source HTML is here: http://pastebin.com/CYd06L87
Datatables is a very powerful grid sorter and you should have no problem using multiple TH's. They also have solutions for table details, which might be an alternate way to approach this task. For example, you could have two main rows, one for your equity and one for your equity, all in the same table. Then, setup row details to accomplish your goal...just one possibility.
Here's the row details tut: http://datatables.net/release-datatables/examples/server_side/row_details.html
There's also a solution for summing row totals.