Why does a dataTable.editable record not get selected when it has the correct id

cworkman

I'm using server side processing of the data for my data table. After debugging the with the DataTables debugger(http://debug.datatables.net/uyixol) and firebug I found that the ids appear to be correct.

However, I'm still not able to select any of the records displayed within the data table and because of this my Delete Button doesn't highlight.

Do you see anything that I may be missing?

Here are my resources:

<link href="@Url.Content("~/Content/DataTables-1.10.0/media/css/jquery.dataTables.css")"
      rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/jquery-ui-1.11.0/jquery-ui.theme.css")"
      rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/jquery-ui-1.11.0/jquery-ui.css")"
      rel="stylesheet" type="text/css" media="all" />
<link href="@Url.Content("~/Content/jquery-ui-1.7.2.custom.css")"
      rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")"
        type="text/javascript"></script>
<script src="@Url.Content("~/Content/DataTables-1.10.0/media/js/jquery.dataTables.min.js")"
        type="text/javascript"></script>
<script src="@Url.Content("~/Content/tuupola-jquery_jeditable-2e6cceb/jquery.jeditable.js")"
        type="text/javascript"></script>
<script src="@Url.Content("~/Content/jquery-ui-1.11.0/jquery-ui.js")"
        type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")"
        type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.dataTables.editable.js")"
        type="text/javascript"></script>
<script type="text/javascript" charset="utf8" src="/Content/DataTables-1.10.0/media/js/dataTables.bootstrap.js"></script>
<script src="@Url.Content("~/Content/jAlert/jquery.alerts.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/jAlert/jquery.alerts.css")" rel="stylesheet" type="text/css" />

<tr role="row" class="odd" id="29761">
<td>AL</td>
<td class="sorting_1">ALABAMA</td>
<td>0.02125</td>
<td>2/28/2007</td>
<td>10/28/2008</td>
</tr>

Here is my Javascript for DataTable and Editable:

   $(document).ready(function () {
        $('#stateTable').dataTable({
            //"bJQueryUI": true,
            "bServerSide": true,
            "sAjaxSource": "AjaxHandler",
            "bProcessing": true,
            "aoColumns": [
                {
                    "sName": "TransactionKey",
                    "bSearchable": false,
                    "bSortable": false,
                    "bVisible": false

                },
                {
                    "sName": "StateShortName"
                },
                {
                    "sName": "StateLongName"
                },
                {
                    "sName": "TransactionStickTax"
                },
                {
                    "sName": "TransactionEffectiveDate"
                },
                {
                    "sName": "TransactionDateStamp"
                }

                
            ]
        }).makeEditable({
            sAddURL: "/State/AddData",
            sDeleteURL: "/State/DeleteData",
            sAddNewRowFormId: "formAddNewTax",
            sAddNewRowButtonId: "btnAddNewTax",
            sAddNewRowOkButtonId: "btnAddNewTaxOk",
            sAddNewRowCancelButtonId: "btnAddNewTaxCancel",
            sDeleteRowButtonId: "btnDeleteTax",

            "aoColumns": [ //non editable read only columns
               
                null,
                null,
                null,
                null,
                null
            ],
            fnShowError: function (message, action) {
                switch (action) {
                    //case "update":
                    //    jAlert(message, "Update failed");
                    //    break;
                    case "delete":
                        jAlert(message, "Delete failed");
                        break;
                    case "add":
                        $("#lblAddError").html(message);
                        $("#lblAddError").show();
                        break;
                }
            },
            fnStartProcessingMode: function () {
                $("#processing_message").dialog();
            },
            fnEndProcessingMode: function () {
                $("#processing_message").dialog("close");
            },
            fnOnDeleting: function (tr, id, fnDeleteRow) {
                jConfirm('Please confirm that you want to delete row with id ' + id, 'Confirm Delete', function (confirmed) {
                    if (confirmed) {
                        fnDeleteRow(id);
                    }
                });
                return false;
            }
        });
    });

HTML:

<div class="row" id="titleAndButton">
    <div class="col-md-3"><h2>State Tax Rates</h2></div>
    <div class="col-md-3" id="buttonsStyle">
        <button id="btnAddNewTax" value="Ok">Add new tax...</button>
        <button id="btnDeleteTax" value="cancel">Delete selected tax</button>
    </div>
</div>
<br/>

<table id="stateTable" class="display">
    <thead>
        <tr>
            <th>
                ID
            </th>
            <th>
                State Code
            </th>
            <th>
                State Name
            </th>
            <th>
                State Tax
            </th>
            <th>
                Effective Date
            </th>
            <th>
                Entry Date
            </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

allan

makeEditable is not a supported plug-in as part of the DataTables project. You could try asking in the issue list for the source repo of that library, but as far as I am aware, the whole library has been decremented and is no longer supported by its author.

Allan

cworkman

Oh I see, Thank you! Is there a new plug-in that has taken its place?

tangerine

http://editor.datatables.net/