0

I have a web application (laravel) with a page which presents a large number of rows (financial transactions) in a HTML table. On each row I want to have a drop-down (select input) allowing the user to assign a category to the transaction.

What is the best approach for allowing the user to select/assign these categories, without creating a page that will be very slow to use on mobile devices??


Here is what I've tried:

Initially I created a single form which contains the entire table, having a select input on every row with a unique id. This seems quite slow and "heavy" though and requires submitting and processing the entire form even if just changing a single row.

As an alternative I created a form on every row, that way I can auto-submit it when they make a change in the select box, which is nicer, but it is still very slow to render so many select boxes, especially if using select2 to style them.

I can try to page the data more aggressively, but I'm wondering if there's a better basic approach?

It occurs to me I could create the form once, hidden, and just display it inplace in the row being edited somehow using javascript (either substituting select box for static text or displaying it below would be okay too. But I'm not sure the best way to go about this, or even if this is best practice for this sort of situation??


How would others approach this? Single form, form per editable row/cell, dynamic form substituted in place etc? I guess I'm not searching for the right things, but am having trouble establishing current best practice for this sort of thing.

I'm using php, laravel 5.4, jquery, bootstrap3 for the page.

  • 1
    If your problem is that a trip to the server is too expensive, then your solution is to avoid that trip until the user is done entering their selections. – Robert Harvey Nov 20 '17 at 16:04
  • It's more the rendering of the page that's too slow with so many controls, rather than the trip to the server itself. Mostly my issue with the single form approach and one submit at the end is that I'd like to avoid a situation where the user has assigned 20 categories, gets distracted, then comes back to find their session has timed out. I feel like with modern web apps the user experience is generally towards sending actions back to the server immediately (via ajax). – madz Nov 20 '17 at 21:30
0

You can use DataTables

In the example you can see how the plus control works

$('#example tbody').on( 'click', 'tr td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = dt.row( tr );
    var idx = $.inArray( tr.attr('id'), detailRows );

    if ( row.child.isShown() ) {
        tr.removeClass( 'details' );
        row.child.hide();

        // Remove from the 'open' array
        detailRows.splice( idx, 1 );
    }
    else {
        tr.addClass( 'details' );
        row.child( format( row.data() ) ).show();

        // Add to the 'open' array
        if ( idx === -1 ) {
            detailRows.push( tr.attr('id') );
        }
    }
} );

You will need the format() function to generate and return an HTML form using the data provided through the argument

This approach will instantiate a form for each row only when that row is expanded

Obviously you'll have to destroy the table when the row gets closed

There's a large number of features and DataTables itself is very flexible. I'm recommending it because I feel like it's also going to solve your other problem, like loading and rendering a lot of data in a staggered fashion

  • Thanks very much for the tip - I've only had time for a quick look so far but it sounds very good, I'll check it out some more and come back to your answer then. Thanks – madz Nov 30 '17 at 10:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.