I currently have a spring mvc app that gets a list of users from a database and displays their information in a table using JSP to basically loop through each object in the list and create a table row for them.
Each user has an expiry date attribute as part of their record in the database. What I want to achieve is basically a button that when toggled shows or hides all users that have expired (i.e. their expiry date is less than today's date).
For this I am trying to use AJAX calls to my controller to fetch me all users expired or not OR only users that haven't expired depending on how the button is toggled.
What I would like help on is the best way to achieve this as I can think of a few nasty ways of doing it like having a separate page and refreshing but I am confused on a few things.
Should I just ditch the JSP looping through to make the table and make a method in JavaScript that creates that table when given the data? If so how do I get the data from the controller to JavaScript, can an AJAX call to a controller return me a list of my user objects?
My best guess is that instead of adding a list of objects to a model and letting JSP do the work, that I instead return a JSON with the data and use JavaScript to build the table. I can then call an update method to re-build the table.
You are correct. You have 2 options:
Have AJAX call return html (i.e. jsp) for the table and then replace
the body of the table
Use JavaScript to build the table and then
update the table with AJAX call which returns JSON.
If you want to get more sophisticated, you could use a JavaScript framework like Knockout.js which would let you mark up the table and refresh the table without too much of JavaScript writing.
Blurgh I'm not sure why this question has received so much attention, especially now in the days of angular but if you are struggling with this then I would strongly recommend the following library:
https://www.ag-grid.com/
Related
I have an ASP.Net Core project and I used EntityFramework to scaffold using CRUD. I have my view pages and I want to make my index page dynamic. I have a hierarchical database where it is in this order, Department, SubDepartment, Machine, Equipment, Problem. I have already made queries for different views where I return data based off a dropdown selection. My question is how do I enter queried data into the table to display in Index?
There are many options and I am not sure where to start. Here are some of my thoughts.
Return the queried data to the view as a JSON and sort of manually parse it into the table.
I am not sure on this one but could I just add the queried data into a ViewBag or ViewData and it would automatically be added to the table?
As of now, I already have a JSON that is being returned into the view.
EDIT: I just remembered that ViewBag/ViewData is likely not an option because to my understanding those require a page refresh. So my question now is how can I parse a JSON into a EntitityFramework created table?
This is the first time i am using REST for any web applications.
For normal get an post and i simply call the API done in Django Rest Framework.
But i am not able to think how can i deal with situations where something more needs to be done.
Suppose I have
List of users in database and their product they have bought.
Now i have web form where if someone adds the user and then submit the button , then
I have to get the list of items bought by that user in 5 hour window
Update the row in database which says buy_succeessful to false
Then again get the list of orders from the items he has bought and then update the rows with order_successful to false
Now current in my submit actions i am doing like
call to api to add the user in override manual enrty table. This is simple post to that table
Then after getting the sucessful tehn i again call api to list of items this user has bought using Query parameters . Then i have the list
Then again i loop through the list and post to api for updating that record in datbase
and so on
I am feeling this is not right.
I have found that quite often there are some more things to do tahn just saving individual objects in database.
whats the best way to do that. DO i need to have view api for every function
Try the 3rd step of the DRF Tutorial:
http://www.django-rest-framework.org/tutorial/3-class-based-views
Here, it shows how to do a "PUT" request for updating data. And also some of the other DRF features.
Also, you can reference serializer.object which is the object instance of the django model record that you are saving to the database. This question here talks about adding extra attributes, etc... before saving to the database:
Editing django-rest-framework serializer object before save
You can also access the record post_save and there are other hooks in the framework that you can use.
What I did for the CRUD in my app is that I select all the item from backend and load it to the front-end and loop the item out using js, to be specified I used ajax.
Think of my app is a todo list. Even if a user inserted a new item, I suppose still need to select all the items from db again after insert query right? same goes to delete, I may use remove() but still need to load so that my item id doesn't mess up. correct?
I using angularjs ng-repeat, I cant do like id++, then I bind the the id in ng-repeat with the object that I got from json form db.
if I have 1 thousand of item that will cause problem because I trigger the load function too much in backend, how to solve that?
Loading all the items from back end is invitation for disaster. It will kill back end and front end both. It becomes a serious usability problem if you dump 1000's of rows of data in the UI. How will the user wade through the data and act on them? Provide some way to filter the items. For example - if it is a todo list display one day at a time (default being today). For any other use case we can provide similar filtering mechanism. That way you query limited data from back end, take it to the UI and display it. If you cannot filter like this at least provide some way of pagination to limit the data you query and transport to the UI.
I'm fairly new in web design/code and I'm trying to figure out/learn how to write script that would execute my table filter. As I found out this would be easiest to do in PHP since all data comes from table itself (and not MySQL DB).
Here is example of HTML with test table and some filters I would like to implement, but I've been having problem with writing PHP script which would work properly.
http://www.bonemachineonline.com/test
(I uploaded example on my own site)
I would appreciate if someone could help me out with this in anyway! Writing example or explaining how/what to do. Anything is more than appreciate!
Try using jquery dataTable().
You can refer the below link
Jquery-dataTable()
You have 3 approaches for data filtering.
If the table is filtered by default, and all the data are not loaded, take the (1) or (2).
If you load the whole table each time, take the (3).
Approaches
(1) Server side, with page reloading : your user checks filters, then clicks on a submit button. You get all the checked filters and you send it to your PHP. Server side, you retrieve the filters and remake your query (SQL or other in your case).
(2) Server side, with AJAX : exactly the same mechanism, but you send the filters to your PHP with an AJAX request, wait a response, remove your table and remake a table with the new data.
(3) Client side, with JavaScript only : when your user checks a filter, you trigger the change event and hide the matched elements in the table.
Some tips
For the approaches (2) and (3), jQuery could be very useful.
For the approach (3), you can use a library. Here: 35+ Useful jQuery Filter and Sort Plugins.
For the approach (1), if in your case the data are in a PHP array, you have a lot of functions to manipulate this array in function of your filters. Here: Array Functions - Table of Contents.
I'm doing a market/stocks watch web project.
At the server side I have a Servlet and Service on a cometd-jetty implementation.
The Service (CometD Client publisher) sends a JSON published data. i.e. [{"Stock Code":"ABC"},{"Stock Code":"DEF"}]. Time interval of published data is almost every second or even less.
At Front-end, I'm using cometd javascript implementation to fetch the data and render it in html table using jquery.
Questions:
1.) What is the best way to render the data in a table (using datatables plugin) with very fast receiving of data from publisher/cometd server (less than a second each message)?
2.) How can I indicate change in price through hi-lighting table cell when stock price changes? I'm trying to figure this out using js or jquery?
Your help is very much appreciated!
1) The DataTables plugin can use a JavaScript array as its data source. You'll have some sort of method that's processing incoming data; push that into a JS array and then call .dataTable() with that as your source.
2) Inside the DataTables initialization object you can set callback functions at various stages. One of these is fnRowCallback, which allows you to modify the row and the cells within, based on the available data. Grab the data, run your comparison function, and when the conditions are met, modify the cell.
For both questions, there should be sample code available at DataTables.net.