Live demo

ID Headline Blog Published date


Description

The x-editable javascript tool is a way to turn table cells into interactive forms that can post incremental updates over ajax. x-editable supports Bootstrap, jQueryUI, and plain jQuery. It requires its own specific initialization to take place after the datatable has populated itself with data.

To enable x-editable columns, inherit your view from XEditableDatatableView instead of the plain DatatableView. The x-editable variant has ajax responders built into it so that the incremental updates can be received, validated, and responded to. Choices lists are also fetched over ajax by the x-editable Javascript library, so this specialized view also responds to those.

Next, use the datatableview.helpers.make_xeditable function as a callback for the columns that should become interactive. You can customize the helper's behavior, but by default, make_xeditable will try to pick reasonable defaults for the field type. This callback returns a <a> tag with data-* API attributes on it that the x-editable javascript knows how to read.

Finally, on your template you will need to include a special initialization to make sure that the frontend understands how to handle what you've set up. The global Javascript object datatableview has a member called make_xeditable (named after the helper function you use in the column definitions), which is a factory that returns a callback for the dataTables.js fnRowCallback hook. See the implementation snippets below.



Implementation in code

        
    class XEditableColumnsDatatableView(XEditableDatatableView):
        model = Entry
        datatable_options = {
            'columns': [
                'id',
                ("Headline", 'headline', helpers.make_xeditable),
                ("Blog", 'blog', helpers.make_xeditable),
                ("Published date", 'pub_date', helpers.make_xeditable),
            ]
        }
    
    // Page javascript
    datatableview.auto_initialize = false;
    $(function(){
        var xeditable_options = {};
        datatableview.initialize($('.datatable'), {
            fnRowCallback: datatableview.make_xeditable(xeditable_options),
        });
    })