Results 1 to 8 of 8

Thread: [RESOLVED] Include row # in jQuery generated table

  1. #1

    Thread Starter
    Junior Member
    Join Date
    Dec 2013
    Posts
    27

    Resolved [RESOLVED] Include row # in jQuery generated table

    Sorry if this has been addressed and I missed it, but I need to some help with adding a row to a table created using jQuery. Below is my code for a working table builder in my MVC project. What I need is to add a column to show the row number (index +1) where I've included "row # here". It seems like it should be a simple task but I'm having difficulty finding anything examples for the correct syntax.

    That row number will be included in my child table as a line number for the record.

    Code:
                function DetailsTable() {
                    if (dmrDetail.length > 0) {
                        var $table = $('<table/>');
                        $table.append('<thead><tr><th>LIN</th><th>Part ID</th><th>Quantity</th><th>Reason</th></tr></thead>');
                        var $tbody = $('<tbody/>');
                        $.each(dmrDetail, function (i, val) {
                            var $row = $('<tr/>');
                            $row.append($('<td/>').html(row # here));
                            $row.append($('<td/>').html(val.PartNum));
                            $row.append($('<td/>').html(val.Qty));
                            $row.append($('<td/>').html(val.Reason));
                            $tbody.append($row);
                        });
                        $table.append($tbody);
                        $('#dmrDetail').html($table);
                    }
                }

  2. #2
    PowerPoster techgnome's Avatar
    Join Date
    May 2002
    Posts
    33,471

    Re: Include row # in jQuery generated table

    Create a counter... initialize it, then in the loop, increment it and display it...
    should be something like this:
    Code:
                        var $tbody = $('<tbody/>');
                        var rCounter = 0;
                        $.each(dmrDetail, function (i, val) {
                            var $row = $('<tr/>');
                            $row.append($('<td/>').html(++rCounter));
                            $row.append($('<td/>').html(val.PartNum));
    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  3. #3

    Thread Starter
    Junior Member
    Join Date
    Dec 2013
    Posts
    27

    Re: Include row # in jQuery generated table

    Worked like a charm! Thanks.

  4. #4

    Thread Starter
    Junior Member
    Join Date
    Dec 2013
    Posts
    27

    Re: [RESOLVED] Include row # in jQuery generated table

    So apparently I marked this resolved a little prematurely.

    The row counter is working great. However, I can't seem to sort out how to link that result to pass it back to my controller. I have all other data passing fine but can't seem to sort out how to reference the ++rCounter column.

  5. #5
    PowerPoster techgnome's Avatar
    Join Date
    May 2002
    Posts
    33,471

    Re: [RESOLVED] Include row # in jQuery generated table

    You don't... it would need to be built as a link that would then contain the information ... how ever that presents a problem because the number is just where it is in the grid... it's not truly linked to the data, so it has no meaning or relationship to the data. But the short of it is how you get what ever it is you do need to pass the data depends on how you're activating the controller in the first place.

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  6. #6

    Thread Starter
    Junior Member
    Join Date
    Dec 2013
    Posts
    27

    Re: [RESOLVED] Include row # in jQuery generated table

    So I'm presently populating the client side table from three text boxes and pushed to the jQuery from an 'add' button. The add button .click function then does some simple validation against the data in textboxes and if isvalid then the code below pushes the data to the function in my OP. Is it possible to move the counter to the add button click event and then just use the data from that in the DetailTable function? The DMRid doesn't actually populate in the DetailsTable but does pass from another textbox in the view. I'm just at a loss how to get the LIN value.

    Code:
        if (isValidItem) {
                        dmrDetail.push({
                            DMRid: $('#DMRid').val().trim(),
                            LIN: $('#LIN').val(),
                            PartNum: $('#PartNum').val().trim(),
                            Qty: parseInt($('#Qty').val().trim()),
                            Reason: $('#Reason').val().trim()
                        });
    
                        //Clear Fields
                        $('#PartNum').val('').focus();
                        $('#Qty').val('');
                        $('#Reason').val('');
    
                    }
    
                    //populate PartDetails
                    DetailsTable();

  7. #7

    Thread Starter
    Junior Member
    Join Date
    Dec 2013
    Posts
    27

    Re: [RESOLVED] Include row # in jQuery generated table

    I was able to sort this out using the original proposed solution with a slight modification. I the code in my last post I set the LIN .val to nothing then modified the DetailsTable() as follows. It's now pushing the appropriate value to the controller action.

    Code:
                        var rCount = 0;
                        $.each(dmrDetail, function (i, val) {
                            val.LIN = ++rCount;
                            var $row = $('<tr/>');
                            $row.append($('<td/>').html(val.LIN));

  8. #8
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    CT
    Posts
    18,073

    Re: [RESOLVED] Include row # in jQuery generated table

    Do you know about the .Data() method in jQuery?

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width