"Shopping cart" without ajax

I am looking for a way to implement a "shopping cart" like functionality while balancing "user experience" and software quality.

In my case I have a classroom with students and need to handle the following list of functionalities:

  1. add/remove students to/from class
  2. manage students' scores

I was told to implement modal with AJAX, but I would rather keep use of JS to minimum and implement things on the server. I came up with two simplified mock-ups and analyzed pros and cons.

Mock-up with AJAX:

enter image description here

Mock-up without AJAX:

enter image description here

Pros and cons of each

With AJAX:

  • Pros
    1. "Modern" look and feel
    2. End user may like the fact that they can complete all the work from one page, without having to jump from page to page
  • Cons
    1. Too many functionalities on one page (update scores, filter table, arr/remove students)
    2. Too much JS (I would rather write code in object oriented language with strong typing)

Without AJAX:

  • Pros
    1. Single page - single responsibility
    2. No JS (all code is in one place, better debugging, easier to read code and to maintain, etc)
  • Cons
    1. I would have to pre-load ~10000+ records into the table, which can be time consuming
    2. Not so "responsive"; have to jump from page to page rather then finish doing everything on a single page

Questions

  • What would be "the industry standard" to go about it?
  • How to go about taking advantage of both?

Edit:

I felt the need to specify that this is somewhat "internal" application. It is not going to be open to "general public". There will be maybe under a ~100 (or a few hundred) people who will use this application. In addition, there probably will be just 2 people at most working on this application. We don't have resources Facebook or Google has to build heavy one page web apps. We are not even allowed to use frameworks like angular. I would use jQuery's AJAX.

Tags: