I'm trying to incorporate something like this: https://infra.clarin.eu/content/libs/DataTables-1.10.6/examples/api/show_hide.html into my R Shiny application.
I'm unfamiliar with how to incorporate the JS into R, but showing/hiding columns doesn't necessarily need to function like this. It could be a drop down (selectInput) with the column headers where the user could select multiple choices in order to hide those specific columns. Or even check boxes to hide/show them.
Just looking for a way for the user to have control over what columns are hidden in a DT.
My options would look like this: options=list(columnDefs = list(list(visible=FALSE, targets=columns2hide))), just need a way to fill columns2hide.
See: Hide certain columns in a responsive data table using DT package
Related
I am trying to build a ad website and stuck at implementing the side filters on the sidebar navigation that are displayed based on the selected category.
1 : https://www.pigiame.co.ke/cars
2 : https://www.pigiame.co.ke/mobile-phones
Notice the different filters that appear on the sidebar based on the category selected on the main menu. Need help with showing the different filters.
The simplest form would be something like the following
Assuming you have a product_features tables, your query should look something like this:
SELECT DISTINCT(`feature`) `feature_name` FROM `product_features` `pf`
INNER JOIN `products` `p` ON `p`.`id` = `pf`.`product_id`
WHERE `p`.`category_id` = ?
this should give you all the features for a category, you can then make your menu based on your category_id which you pass to the menu
I have a container that contains data populated from my database as well as data created by the user on another page.
My issue is styling. Currently my page jumbles and the columns are all over the place. They appear to be following the end of the longest column.
Jumbly
I would like for after 3 columns a new row to be created, but I'm not sure how to go about this.
Note/Tricky part:- My users have the option to sort where each Column (Sales, BingBong, Game of Thrones) goes. If they want Game of Thrones first, they can make it the first column. Obviously this messes things up because each column will have a different height at different times
Most everything I've seen squishes all the columns together to create a pinterest-like look. That is not what I want and I know that my design will create white space. That is what I'm being told to create.
UPDATE: Here is my code to show you how I iterate through each of these departments (sales, rainbows n'sprinkles, Game of Thrones, etc).
Hopefully this makes it clear why adding a clearfix div doesn't work in my case
code
http://www.codeply.com/go/jXuoGHHker
This worked brilliantly!!! Works with dynamic data...all I grabbed were the few lines of CSS
I have a very big table filled with data
1st - i want to use show/hide columns:
the problem is when my columns pass 10-12 to more it got really slow
for this i gave each a class for the column it is in and call it
for toggle with assocciated anchor().
2nd & 3rd - i want to use fixed headers as my row go way more than 1000's,
as i do this i can not effectively use my search which i wrote it with js
and really is a lightweight code.
PS. plz remember i have a very large json generated table with more than 20 columns and way more than 1000's of rows and i ** CANT USE ANY FRAME WORKS EXCEPT JQUERY AND JQUERYUI **
EDIT: ADDS SOME CODE FOR SHOW/HIDE
$('#columnSelect').on('click', 'li', function(){
var columnTmp = $(this).children('a').text()
$('#dataTable').find('.'+columnTmp).toggle()
})
i have a list of my tags which is also created dynamically with my first ajax call
i got the text of anchor and match it with
then toggle that column tds
I use a combination of two plugins for some of my "large tables"
This is used to format the table, provides sorting and other functionality:
http://www.tablefixedheader.com/fullpagedemo/
And, this provides filtering, this is fast and very effective, it may well help if you have a lot of columns/data. Have a search box or drop down discretely at the top of each column which will allow for filtering on that column and a "quick find" type search box which will search/filter across all columns
http://www.picnet.com.au/picnet-table-filter.html
If you are really jQuery lover then I suggest to go with some free jQuery Grid APIs such as Slick Grid or Flexi Grid
I am using the DataTables plugin for jQuery and I would like to reorder the columns after the data is loaded. I know I can reorder them upon creating the table.
What I would like to do is to draw the table, load the data from the server and then, based on the response from the server, to reorder the columns.
How can I achieve this?
It is possible to do so by using the DataTables plugin ColReorder. After enabling the plugin the columns can be moved with the fnColReorder(from, to) like this:
var table = jQuery("#table_id").dataTable(settings);
table.fnColReorder(4, 10);//move the 4th column on the 10th position
table.fnAdjustColumnSizing();//a good idea to make sure there will be no displaying issues
But there should be payed some attention when using the column indexes: these are the indexes from within the table's columns array. These means, that the index does not have to match the column's number in the table(some columns can be hidden, according to your specification).
I have been looking around at several Data Grids for JQuery UI.
I have found several such as:
* Flexigrid: http://flexigrid.info/
* jQuery Grid: http://www.trirand.com/blog/
* jqGridView: http://plugins.jquery.com/project/jqGridView
* Ingrid: http://reconstrukt.com/ingrid/
* SlickGrid http://github.com/mleibman/SlickGrid
However, what I need to do is when a record is clicked, expand the record into a sort of in-line form for the user to enter information. The amount of information in this form is much greater than the amount show in each gridview row.
For example you might see:
Header
Row 1
Row 2
Row 3
Row 4
Row 5
then click on Row 3 and see
Header
Row 1
Row 2
Form
Data input..... input and change data about the item that was in Row 3
Some more data input from input fields, selects etc.
End Form
Row4
Row5
Any ideas on how to use one of these data grid addons or another addon?
Or another way to go about doing this all together?
Thanks!
P.S. I would like it to look as professional as possible :)
Take a look at http://jeasyui.com
They have, buried deep within the demos, an example of what you describe. I could not find it on their website, but I have implemented an in table edit (that expands to a larger form just below the table item).