JQuery DataTable кликабельные заголовки

Question

Я показываю следующую информацию, используя jquery datatables.ID, Названия, Адрес, Город, ZipCode. Строки в ID просто содержат ссылку, которая ссылается на страницу сведений о продукте, что приятно, однако в тексте написано «View» для каждой строки.Это глупо.Я хотел бы скрыть / удалить столбец Id и сделать заголовки кликабельными, то есть при нажатии на заголовок пользователь должен быть перенесен на страницу сведений.Другими словами, я хочу, чтобы заголовок столбца перенял функциональность столбца Id.

Это мой код.

$(document).ready(function () {

    $('#myDataTable').dataTable({
        "bServerSide": true,
        "sAjaxSource": "DataTable/AjaxHandler",
        "bProcessing": true,
        "aoColumns": [
                        { "sName": "ID",
                            "bSearchable": false,
                            "bSortable": false,
                            "fnRender": function (oObj) {
                                return '<a href=\"' + oObj.aData[0] + '\">View</a>';
                            }
                        },
                        { "sName": "TITLE" },
                        { "sName": "ADDRESS" },
                        { "sName": "CITY" },
                        { "sName": "ZIPCODE" }
                    ]
    });
});

Я использую MVC 2.0

Надеюсь, это имеет смысл.

Answer 1

Привет код, который вы предоставили, не работает.Мне удалось решить проблему самостоятельно, вот мой окончательный код для тех, кто может оказаться в такой же ситуации.

$(document).ready(function () { 

$('#myDataTable').dataTable({
    "bServerSide": true,
    "sAjaxSource": "DataTable/AjaxHandler",
    "bProcessing": true,
    "aoColumns": [
                    { 
                        "sName": "TITLE", //index 1
                        "bSearchable": true,
                        "bSortable": true,
                        "fnRender": function (oObj) 
                        {
                            return '<a href=\"' + oObj.aData[0] + '\">' + oObj.aData["1"] + '</a>';
                        }                             
                    }
                    ,
                    { 
                        "sName": "ADDRESS", //index 2
                        "bSearchable": true,
                        "bSortable": true,
                        "fnRender": function (oObj) 
                        {
                            return oObj.aData["2"] 
                        }                             
                    }
                    ,
                                            { 
                        "sName": "CITY", //index 3
                        "bSearchable": true,
                        "bSortable": true,
                        "fnRender": function (oObj) 
                        {
                            return oObj.aData["3"] 
                        }                             
                    }
                    ,
                                            { 
                        "sName": "ZIPCODE", //index 4
                        "bSearchable": true,
                        "bSortable": true,
                        "fnRender": function (oObj) 
                        {
                            return oObj.aData["4"] 
                        }                             
                    }
                ]
    });
}); 

Answer 2

    $(document).ready(function () {

$('#myDataTable').dataTable({
    "bServerSide": true,
    "sAjaxSource": "DataTable/AjaxHandler",
    "bProcessing": true,
    "aoColumns": [
                    { "sName": "ID",
                        "bSearchable": false,
                        "bSortable": false,
                        "fnRender": function (oObj) {
                            return '<a href=\"' + oObj.aData[0] + '\">View</a>';
                        }
                    },
                    { "sName": "TITLE",
                      "fnRender": function (oObj) {
                        var al = oObj.aData[0].split('>');                          
                        var al2 = al[0].split('=');                         
                        var al3 = al2[1].split('/');                           
                        return "<a href='\" + al3[al3.length-1] + "'>"oObj.aData[1] + "</a>";
                    },"aTargets": [1]

}, {"sName": "ADDRESS"}, {"sName": "CITY"}, {"sName": "ZIPCODE"}]});});

Может быть, эта помощь может быть не идеальной, она может работать

Чтобы скрыть столбец, вы можете попробовать перейти по ссылке показать / скрыть столбец в базе данных