Add custom button in jtable

Dhairyashil picture Dhairyashil · May 25, 2013 · Viewed 10.4k times · Source

Can we add custom button in jtable. Is there any option available for creating a button?
Means If I want a button for creating PDF, then how can I shall do?

Answer

girardengo picture girardengo · May 29, 2013

To insert a button you have to use the display: function , and customize it to your choice; ie i created a column with a button: the variable data contains the data for the current record.

$(document).ready(function () {

    $('#StudentTableContainer').jtable({
        title: 'The Student List',
        paging: true, //Enable paging
        pageSize: 10, //Set page size (default: 10)
        sorting: true, //Enable sorting
        defaultSorting: 'Name ASC', //Set default sorting
        actions: {
            listAction: '/Demo/StudentList',
            deleteAction: '/Demo/DeleteStudent',
            updateAction: '/Demo/UpdateStudent',
            createAction: '/Demo/CreateStudent'
        },
        fields: {
            StudentId: {
                key: true,
                create: false,
                edit: false,
                list: false
            },
            Name: {
                title: 'Name',
                width: '40%'
            },
            EmailAddress: {
                title: 'Email address',
                list: false
            },
            Password: {
                title: 'User Password',
                type: 'password',
                list: false
            },
            Gender: {
                title: 'Gender',
                width: '20%',
                options: { 'M': 'Male', 'F': 'Female' }
            },
            MyButton: {
                title: 'MyButton',
                width: '40%',
                display: function(data) {
                     return '<button type="button" onclick="alert(' + data.record.StudentId + ')">create PDF</button> ';
                }
            },

        }
    });

    //Load student list from server
    $('#StudentTableContainer').jtable('load');
});