need help with editable tables in jQuery ( DataTables plugin )

Question

I'm trying to use jQuery and its plugin DataTables ( http://www.datatables.net/release-datatables/examples/api/editable.html ), to make an editable table.

Here's my code so far. The top part of it works great by generating a table inside a DIV with the data from a js array.

Yet I also need this table to be editable. I have found an example code for it ( see bottom part ) but kinda can't figure out how to apply it to my table?

Any ideas? Thanks!

$(document).ready(function() {

            $('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
            /// create a table within the '#dynamic' DIV

            $('#example').dataTable( {
                "aaData": numbarr,     /////// takes data from the 'numbarr' js array.
                "aoColumns": [
                    { "sTitle": "Country&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" },   //// column names
                    { "sTitle": "Number&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" },
                    { "sTitle": "Tariff ID&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" },
                    { "sTitle": "Customer Acc&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" },
                    { "sTitle": "Customer Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" },
                    { "sTitle": "Payment Terms&nbsp;&nbsp;" },
                    { "sTitle": "Payout/Call&nbsp;&nbsp;" },
                    { "sTitle": "Payout/Min&nbsp;&nbsp;" },
                ]
            } );

            ///////////////////////////// the code above workd fine!


            ////////////////// this code was taken from an example, not sure how to connect it with my table...
            $('td', oTable.fnGetNodes()).editable( '../examples_support/editable_ajax.php', {
                "callback": function( sValue, y ) {
                    var aPos = oTable.fnGetPosition( this );
                    oTable.fnUpdate( sValue, aPos[0], aPos[1] );
                },
                "submitdata": function ( value, settings ) {
                    return {
                        "row_id": this.parentNode.getAttribute('id'),
                        "column": oTable.fnGetPosition( this )[2]
                    };
                },
                "height": "12px"
            } );
            ////////////////// this code was taken from an example, not sure how to connect it with my table...

Felix · Accepted Answer · 2011-07-02 16:58:49Z

1

I've used this plugin http://square-bracket.com/openjs

answered Jul 2, 2011 at 16:58

Felix

3,1447 gold badges44 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

holocron · Accepted Answer · 2011-08-02 06:36:59Z

0

The example I see states to initialize your table like:

$('#example').dataTable(options).makeEditable(options);

That being said, I haven't gotten it to work yet either.

answered Aug 2, 2011 at 6:36

holocron

3121 gold badge3 silver badges12 bronze badges

Comments

bensiu · Accepted Answer · 2012-11-14 23:26:23Z

0

This is an example that works for me:

$('#tblDataTable2').dataTable({

    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "aaSorting": [[ 0, "asc" ]],
    "aoColumnDefs": [
        { "sClass": "center", "aTargets": [ 0, 1 ] }
    ]
}).makeEditable({
    sAddURL:    "Setting?operation=create",
    sUpdateURL: "Setting?operation=update",
    "aoColumns": [
                { placeholder: '' },
                { placeholder: '' }
            ],
});

edited Nov 14, 2012 at 23:26

bensiu

25.7k56 gold badges81 silver badges117 bronze badges

answered Aug 10, 2011 at 7:34

L_K

11 bronze badge

Collectives™ on Stack Overflow

need help with editable tables in jQuery ( DataTables plugin )

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related