Multiple dropdowns with dependancy - javascript

I want to display 4 dropdowns, the items in each dropdown, depends on selected item in previous dropdown.
I want to implement everything in javascript, meaning the servlet should access DB (everything is stored in one reference table, where a column "represents" a dropwdown ) only once and fetch all the relevant data.
The maximum number of possible combinations is about 9k.
How can I achieve that?
I guess the main problem is the data structure that should be used for this.
Maybe use of nested Maps?

Related

Dropdown filter list on a big DataTable using Ajax

Using a DataTable with 15K+ results, I am creating a dropdown filter list like in Excel & also google sheets. These filter lists show all possible results for each column (e.g. ID dropdown would effectively have 15K+ results), with a checkbox beside them to filter by. Very similar to this:
I'm currently creating something with select2 and ajax to load in all the column results, however this takes 2-3 seconds per filter due to the large dataset and additional filters applied to the datatable. This is only run when the column dropdown is selected, and then cached unless any filters change.
I could load all results into the DOM on page load, but that means another 3 seconds on page load, which isn't ideal. Plus the issue of having 15K+ results in the DOM doesn't sound practical.
We will have records of above 30K soon, and there are 28 different columns to filter by. I am looking for help on how to efficiently retrieve all results. I see that Google sheets is able to do it with large dataset, however they do not use pagination as I do.
Use server-side processing which will definitely improve page loading times.
Regarding column filters, you would need to retrieve all possible value for each column via Ajax and then populate corresponding drop-down box for each column.

how to select multiple values in a drop down Data tables

I am new to jquery and Data tables. I have a drop down when user select one value it will search the data and draw a table.This search and drawing a table both are default properties of data tables. Now i want the user can select multiple value.
And based on the multiple selection the search should happen.I did lot of search on this but didn't get any thing. Any help will be appreciate !!
In this image i have selected one value from drop down and based on that two entries are populating on table. now i want to select multiple values here in this drop down , may be using check box after that need the search should work with both selected entries.
I did this . I am posting this answer because it may be help some one.
jQuery MultiSelect is a jQuery plugin that turns a multiselect list into a nice dropdown list with checkboxes. This plugin is easy to use and very useful in web form. You need to use two library called jquery.multiselect.css and jquery.multiselect.js. if you will search examples of multi select using J query you will find many links and that will work perfect with your data tables. For search option You need to pass multiple value to the function which is constructing your data tables. See below link for details.
http://www.codexworld.com/multi-select-dropdown-list-with-checkbox-jquery/

Javascript - Dynamically populate a table (datatables)

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

YUI3 Datatable - row formatting and selection

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.

jqGrid multi-select sort/show checked items at the top always

I have a a jqGrid that shows as list of rows ... several thousand.
When the grid loads, it will pull down all the data with their previous selections already checked.
My questions is, how do I set the sort order to always show the selected items at the top?
Thanks in advance!!
You question seems be very close to another one which I answered recently (see here). If you has several thousand or event thousand rows you should use paging of date to improve performance of the grid. The solution which I suggested is very simple and it supports saving of selected state over the paging.
One more remark. If you have jqGrid with local data you can implement custom sorting of data. To do this you just need define sorttype as function. If the data need be sorted by a column jqGrid will compare items. The function sorttype should just return any string or number which should be used instead of the cell value. In the case you can easy place for example selected items at the top of grid. You can find examples of custom formatting here, here and here.

Categories

Resources