1. Free Delta
  2. Javascript
  3. DataTables jQuery Making Some Columns Editable

DataTables jQuery Making Some Columns Editable

How to make editable certain columns with DataTables jQuery plugin, without having to implement the whole row CRUD code for every field.

You've got a table data and you want to make editable only certain columns, but not all of them. This will allow you to edit a field inline without having to implement the whole row CRUD for every column.

We just set the first column as hidden. The first column is the one that has the id from the data base record you want to update.


Here is the code

<script src="jquery.dataTables.js"></script>
<script src="jquery.jeditable.mini.js"></script>
<script src="jquery.dataTables.editable.js"></script>
</head>
<body>
<h2>Contact List</h2>
<table id="listdata">
    <thead>
        <tr>
            <th></th>
            <th>List Name (only editable column)</th>
            <th>Date</th>
            <th>N.Contacts</th>
            <th>Add</th>
            <th>See</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        </tr>
    </tbody>
</table>

<script language="JavaScript" type="text/javascript">
$(document).ready(function() {

var oTable = $('#listdata').dataTable(
                {
                    "bProcessing"   : true,
                    "bFilter": false,
                    "sPaginationType": "full_numbers",
                    "aaSorting": [[ 2, "desc" ]], // Default order by column
                    "sAjaxSource": "./listdata.php",
                    "aoColumns": [
                    { "bVisible":    false }, // First column: id (hidden)
                    null,
                    null,
                    null,
                    null,
                "aTargets": [3],
                "bSortable": false
                },
                {
                "mRender": function ( data, type, row ) {
                    // see contacts
					return '<a href="./contactlist/' + row[0] + '" >' +
					'<img src="/images/see-contacts.png" alt="See contacts" /></a>';
                    }
                },
                "aTargets": [4],
                "bSortable": false
                },
                {
                "mRender": function ( data, type, row ) {
                            return '<a href="javascript: deleteList(\'' + row[0] + '\',\'' + row[1] + '\');">' +
                             '<img src="/images/del.png" alt="Delete list" /></a>';
                },
                "aTargets": [5],
                "bSortable": false
                }
                    ],
                    "fnRowCallback" : function (nRow, aData, iDisplayIndex) {
                        $(nRow).attr('id', aData[0]);
                            $('td:eq(0)', nRow).editable("./listedit/" + aData[0] , { // Passing id parameter to update function
                                'callback': function (sValue, y) {
                                    var aPos = oTable.fnGetPosition(this);
                                    oTable.fnUpdate(sValue, aPos[0], aPos[1]);
                                },
                                'height': '14px'
                            });
                        return nRow;
                    },
                }
            );
  });
</script>