数据表自定义字段

时间:2014-01-04 09:21:20

标签: jquery html datatable

我正在使用jQuery数据表开发一个带有访问json对象方法的Web应用程序。这是我指定的代码

      "aoColumns": [
        { "mData": '<input type="checkbox" value='+id+>'},
        { "mData": "email_address" },

    ]

我需要添加一个带id的checkbx。 但它没有用,请帮帮我

1 个答案:

答案 0 :(得分:1)

首先,您尚未发布完整的代码。

您可能需要参考mData文档。它只是从JSON数据属性中读取数据,包括嵌套数据对象。

或者,您可能需要考虑mRender,其中包含

  

此属性是mData的渲染合作伙伴,建议使用此属性   当你想操纵数据进行显示时(包括   过滤,排序等)但不改变基础数据   表,使用此属性。

但请查看以下示例,其中我使用了回调函数 fnRowCallback ,根据文档

  

此功能允许您在每行后“发布”   为每个表绘制生成,但在屏幕上呈现之前。   此函数可用于设置行类名等。

<强>代码:

$(document).ready(function() {
    $('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );

    $('#example').dataTable( {
        "aaData": 
        [
            {
              "engine": "Trident",
              "browser": "Internet Explorer 4.0",
              "platform": "Win 95+",
              "version": "4",
              "grade": "X"
            },
            {
              "engine": "Trident",
              "browser": "Internet Explorer 5.0",
              "platform": "Win 95+",
              "version": "5",
              "grade": "C"
            },
            {
              "engine": "Trident",
              "browser": "Internet Explorer 5.5",
              "platform": "Win 95+",
              "version": "5.5",
              "grade": "A"
            },
            {
              "engine": "Trident",
              "browser": "Internet Explorer 6",
              "platform": "Win 98+",
              "version": "6",
              "grade": "A"
            },
            {
              "engine": "Trident",
              "browser": "Internet Explorer 7",
              "platform": "Win XP SP2+",
              "version": "7",
              "grade": "A"
            },
            {
              "engine": "Trident",
              "browser": "AOL browser (AOL desktop)",
              "platform": "Win XP",
              "version": "6",
              "grade": "A"
            },
            {
              "engine": "Gecko",
              "browser": "Firefox 1.0",
              "platform": "Win 98+ / OSX.2+",
              "version": "1.7",
              "grade": "A"
            },
            {
              "engine": "Gecko",
              "browser": "Firefox 1.5",
              "platform": "Win 98+ / OSX.2+",
              "version": "1.8",
              "grade": "A"
            },
            {
              "engine": "Gecko",
              "browser": "Firefox 2.0",
              "platform": "Win 98+ / OSX.2+",
              "version": "1.8",
              "grade": "A"
            },
            {
              "engine": "Gecko",
              "browser": "Firefox 3.0",
              "platform": "Win 2k+ / OSX.3+",
              "version": "1.9",
              "grade": "A"
            },
            {
              "engine": "Gecko",
              "browser": "Camino 1.0",
              "platform": "OSX.2+",
              "version": "1.8",
              "grade": "A"
            },
            {
              "engine": "Gecko",
              "browser": "Camino 1.5",
              "platform": "OSX.3+",
              "version": "1.8",
              "grade": "A"
            },
            {
              "engine": "Gecko",
              "browser": "Netscape 7.2",
              "platform": "Win 95+ / Mac OS 8.6-9.2",
              "version": "1.7",
              "grade": "A"
            },
            {
              "engine": "Gecko",
              "browser": "Netscape Browser 8",
              "platform": "Win 98SE+",
              "version": "1.7",
              "grade": "A"
            },
            {
              "engine": "Gecko",
              "browser": "Netscape Navigator 9",
              "platform": "Win 98+ / OSX.2+",
              "version": "1.8",
              "grade": "A"
            },
            {
              "engine": "Gecko",
              "browser": "Mozilla 1.0",
              "platform": "Win 95+ / OSX.1+",
              "version": "1",
              "grade": "A"
            },
            {
              "engine": "Gecko",
              "browser": "Mozilla 1.1",
              "platform": "Win 95+ / OSX.1+",
              "version": "1.1",
              "grade": "A"
            },
            {
              "engine": "Gecko",
              "browser": "Mozilla 1.2",
              "platform": "Win 95+ / OSX.1+",
              "version": "1.2",
              "grade": "A"
            },
            {
              "engine": "Gecko",
              "browser": "Mozilla 1.3",
              "platform": "Win 95+ / OSX.1+",
              "version": "1.3",
              "grade": "A"
            },
            {
              "engine": "Gecko",
              "browser": "Mozilla 1.4",
              "platform": "Win 95+ / OSX.1+",
              "version": "1.4",
              "grade": "A"
            },
            {
              "engine": "Gecko",
              "browser": "Mozilla 1.5",
              "platform": "Win 95+ / OSX.1+",
              "version": "1.5",
              "grade": "A"
            },
            {
              "engine": "Gecko",
              "browser": "Mozilla 1.6",
              "platform": "Win 95+ / OSX.1+",
              "version": "1.6",
              "grade": "A"
            },
            {
              "engine": "Gecko",
              "browser": "Mozilla 1.7",
              "platform": "Win 98+ / OSX.1+",
              "version": "1.7",
              "grade": "A"
            },
            {
              "engine": "Gecko",
              "browser": "Mozilla 1.8",
              "platform": "Win 98+ / OSX.1+",
              "version": "1.8",
              "grade": "A"
            },
            {
              "engine": "Gecko",
              "browser": "Seamonkey 1.1",
              "platform": "Win 98+ / OSX.2+",
              "version": "1.8",
              "grade": "A"
            },
            {
              "engine": "Gecko",
              "browser": "Epiphany 2.20",
              "platform": "Gnome",
              "version": "1.8",
              "grade": "A"
            },
            {
              "engine": "Webkit",
              "browser": "Safari 1.2",
              "platform": "OSX.3",
              "version": "125.5",
              "grade": "A"
            },
            {
              "engine": "Webkit",
              "browser": "Safari 1.3",
              "platform": "OSX.3",
              "version": "312.8",
              "grade": "A"
            },
            {
              "engine": "Webkit",
              "browser": "Safari 2.0",
              "platform": "OSX.4+",
              "version": "419.3",
              "grade": "A"
            },
            {
              "engine": "Webkit",
              "browser": "Safari 3.0",
              "platform": "OSX.4+",
              "version": "522.1",
              "grade": "A"
            },
            {
              "engine": "Webkit",
              "browser": "OmniWeb 5.5",
              "platform": "OSX.4+",
              "version": "420",
              "grade": "A"
            },
            {
              "engine": "Webkit",
              "browser": "iPod Touch / iPhone",
              "platform": "iPod",
              "version": "420.1",
              "grade": "A"
            },
            {
              "engine": "Webkit",
              "browser": "S60",
              "platform": "S60",
              "version": "413",
              "grade": "A"
            },
            {
              "engine": "Presto",
              "browser": "Opera 7.0",
              "platform": "Win 95+ / OSX.1+",
              "version": "-",
              "grade": "A"
            },
            {
              "engine": "Presto",
              "browser": "Opera 7.5",
              "platform": "Win 95+ / OSX.2+",
              "version": "-",
              "grade": "A"
            },
            {
              "engine": "Presto",
              "browser": "Opera 8.0",
              "platform": "Win 95+ / OSX.2+",
              "version": "-",
              "grade": "A"
            },
            {
              "engine": "Presto",
              "browser": "Opera 8.5",
              "platform": "Win 95+ / OSX.2+",
              "version": "-",
              "grade": "A"
            },
            {
              "engine": "Presto",
              "browser": "Opera 9.0",
              "platform": "Win 95+ / OSX.3+",
              "version": "-",
              "grade": "A"
            },
            {
              "engine": "Presto",
              "browser": "Opera 9.2",
              "platform": "Win 88+ / OSX.3+",
              "version": "-",
              "grade": "A"
            },
            {
              "engine": "Presto",
              "browser": "Opera 9.5",
              "platform": "Win 88+ / OSX.3+",
              "version": "-",
              "grade": "A"
            },
            {
              "engine": "Presto",
              "browser": "Opera for Wii",
              "platform": "Wii",
              "version": "-",
              "grade": "A"
            },
            {
              "engine": "Presto",
              "browser": "Nokia N800",
              "platform": "N800",
              "version": "-",
              "grade": "A"
            },
            {
              "engine": "Presto",
              "browser": "Nintendo DS browser",
              "platform": "Nintendo DS",
              "version": "8.5",
              "grade": "C/A<sup>1</sup>"
            },
            {
              "engine": "KHTML",
              "browser": "Konqureror 3.1",
              "platform": "KDE 3.1",
              "version": "3.1",
              "grade": "C"
            },
            {
              "engine": "KHTML",
              "browser": "Konqureror 3.3",
              "platform": "KDE 3.3",
              "version": "3.3",
              "grade": "A"
            },
            {
              "engine": "KHTML",
              "browser": "Konqureror 3.5",
              "platform": "KDE 3.5",
              "version": "3.5",
              "grade": "A"
            },
            {
              "engine": "Tasman",
              "browser": "Internet Explorer 4.5",
              "platform": "Mac OS 8-9",
              "version": "-",
              "grade": "X"
            },
            {
              "engine": "Tasman",
              "browser": "Internet Explorer 5.1",
              "platform": "Mac OS 7.6-9",
              "version": "1",
              "grade": "C"
            },
            {
              "engine": "Tasman",
              "browser": "Internet Explorer 5.2",
              "platform": "Mac OS 8-X",
              "version": "1",
              "grade": "C"
            },
            {
              "engine": "Misc",
              "browser": "NetFront 3.1",
              "platform": "Embedded devices",
              "version": "-",
              "grade": "C"
            },
            {
              "engine": "Misc",
              "browser": "NetFront 3.4",
              "platform": "Embedded devices",
              "version": "-",
              "grade": "A"
            },
            {
              "engine": "Misc",
              "browser": "Dillo 0.8",
              "platform": "Embedded devices",
              "version": "-",
              "grade": "X"
            },
            {
              "engine": "Misc",
              "browser": "Links",
              "platform": "Text only",
              "version": "-",
              "grade": "X"
            },
            {
              "engine": "Misc",
              "browser": "Lynx",
              "platform": "Text only",
              "version": "-",
              "grade": "X"
            },
            {
              "engine": "Misc",
              "browser": "IE Mobile",
              "platform": "Windows Mobile 6",
              "version": "-",
              "grade": "C"
            },
            {
              "engine": "Misc",
              "browser": "PSP browser",
              "platform": "PSP",
              "version": "-",
              "grade": "C"
            },
            {
              "engine": "Other browsers",
              "browser": "All others",
              "platform": "-",
              "version": "-",
              "grade": "U"
            }
        ],
        "aoColumns": 
        [
                    { "mData": "engine"},
                    { "mData": "browser" },
                    { "mData": "platform" },
                    { "mData": "version" },
                    { "mData": "grade" }
        ],
        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
            console.log(aData);
            $('td:eq(2)', nRow).html('<input type="checkbox" value=' + aData["engine"] + '>');
            return nRow;
        }
    } );   
} );

查看此工作fiddle。我希望它有所帮助!