jQuery-JTable: add on click event for row?

Question

I have to following code to show my user table, this is achieved by JTable.

<script type="text/javascript">
    $(document).ready(function() {              
        $('#userTableContainer').jtable({
            title: 'Users',
            selecting: false,
            paging: true,
            pageSize: 15,
            sorting: true,
            addRecordButton: false,
            saveUserPreferences: false,
            create: false,
            edit: false,
            actions: {
                listAction: 'user/getUsers.htm',
            },
            fields: {
                username: {
                    title: 'username'
                },
                firstname: {
                    title: 'firstname'
                },
                lastname: {
                    title: 'lastname'
                },
                company: {
                    title: 'company'
                }
             }
        });
        $('#userTableContainer').jtable('load');              
    });    

</script>

<div id="content">
    <h1>Users</h1>      

    <br />
    <div id="userTableContainer">

    </div>
</div>

Is it possible to add a custom action event for every row? So that i could submit a request like "user/showUser.htm" to my controller.

you mean add a button or something to a row? And open a popup window with user details on click? — Jules Colle, Apr 08 '13 at 15:18
an action to the row, which would open the user details or anything like that. it doesn't have to be a popup even, it can also just be a new page, wouldn't really matter — James Carter, Apr 09 '13 at 05:59

score 12 · Accepted Answer · answered Apr 09 '13 at 12:57

12

This should get you on your way:

$('#userTableContainer').jtable({
    ....
    recordsLoaded: function(event, data) {
        $('.jtable-data-row').click(function() {
            var row_id = $(this).attr('data-record-key');
            alert('clicked row with id '+row_id);
        });
    }
});

answered Apr 09 '13 at 12:57

Jules Colle

11,227
8
60
67

can you tell me that how to access all the values of cells of a particular row.Like the above code only provides the value of the column which is the key. – Anurag Singh Mar 02 '14 at 13:19
2

@user1334573 it's been a long time since I worked with jtable. try calling `console.log(data)` in the `recordsLoaded` function, and have a look what data is available to work with. I have a hunch that all records will be available in the `data` object. Also the function `getRowByKey()` might come in handy.. http://www.jtable.org/apireference#met-getRowByKey – Jules Colle Mar 02 '14 at 18:16
[Object { product_name="we", company="tyr", quantity="50", more...}, Object { product_name="trf", company="yu", quantity="50", more...} – Anurag Singh Mar 02 '14 at 18:19
the message is data is not defined – Anurag Singh Mar 02 '14 at 18:28
3

@user1334573 I believe it should just be `data.company` then. or wait it looks like an array. Try `data[0].company`, this should return you the company in the first row. You could iterate trough all rows if you want with a simple for loop. – Jules Colle Mar 02 '14 at 18:33
@Jules Colle can you let me know how to use getRowKey() as in the document there is just a single line desccription – Anurag Singh Mar 02 '14 at 19:17
I'm also having issues with extracting the values from my array here, which when writing the data object to the console log is showing there's data in there (Object { records: Array[6], serverResponse: Object }), but when trying to write any of the underlying values (data.records[0].REFKEY, which I see in my console), I'm getting "undefined".... what am I missing? – denisb Dec 30 '16 at 13:52
$(this).data('record') in the above click function will give you the record of the selected row – suomi-dev Jan 17 '22 at 23:12

jQuery-JTable: add on click event for row?

1 Answers1

Linked