如何从Datatable单元格中获取内部html值

时间:2014-04-29 18:46:27

标签: javascript php jquery datatable

我是DataTable的新手。当我点击与行关联的viewlink而不是我得到的值[object object]时,我试图获取行的第一个单元格值。

继承我的代码         

        $(document).ready(function() {


            // Delete a record
            $('#example').on('click', 'a.editor_view', function (e) {
                e.preventDefault();
                var rowIndex = oTable.fnGetPosition( $(this).closest('tr')[0] );
                 aData = oTable.fnGetData($(this).parents('tr')[0]);
                alert(aData);
            } );

            // DataTables init

            var oTable=$('#example').dataTable( {
                "sDom": "Tfrtip",
                "sAjaxSource": "php/browsers.php",
                "aoColumns": [
                    { "mData": "browser" },
                    { "mData": "engine" },
                    { "mData": "platform" },
                    { "mData": "grade", "sClass": "center" },
                    {
                        "mData": null, 
                        "sClass": "center",
                        "sDefaultContent": '<a href="" class="editor_view">view</a> / <a href="" class="editor_remove">Delete</a>'
                    }
                ]
            } );
        } );

HTML表:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
<thead>
    <tr>
        <th width="30%">Browser</th>
        <th width="20%">Rendering engine</th>
        <th width="20%">Platform(s)</th>
        <th width="14%">CSS grade</th>
        <th width="16%">Admin</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th>Browser</th>
        <th>Rendering engine</th>
        <th>Platform(s)</th>
        <th>CSS grade</th>
        <th>Admin</th>
    </tr>
</tfoot>

现在,当我点击视图时,我需要导航到另一个ID为的页面 view.php?ID = 125

谢谢

2 个答案:

答案 0 :(得分:0)

$('#example').on('click', 'a.editor_view', function (e) {
  e.preventDefault();
  var rowIndex = oTable.fnGetPosition( $(this).closest('tr')[0] );
  aData = oTable.fnGetData(rowIndex,0);
  alert(aData);
} );

来自api docs:

fnGetData 输入参数:
{int | node}:TR行节点,TD / TH单元节点或整数。如果作为TR节点给出,则将返回整行的数据源。如果作为TD / TH单元节点给出,则将自动计算iCol并返回单元的数据。如果以整数形式给出,则将其视为行的aoData内部数据索引(请参阅fnGetPosition)以及所用行的数据。

{int}:您想要数据的可选列索引。

答案 1 :(得分:0)

假设您的第一行是您的ID,您是否希望在您的dataTable初始化程序中包含这样的链接?

$(document).ready(function () {
    var oTable = $('#example').dataTable({
        "aoColumnDefs": [{
            "fnRender": function (oObj) {
                var id = oObj.aData[0];
                var links = [
                    '<a href="/view.php?id=' + id + '" class="editor_view">View</a>',
                    '<a href="/delete.php?id=' + id + '" class="editor_remove">Delete</a>'];
                return links.join(' / ');
            },
                "sClass": "center",
            "aTargets": [4]
        }, {
            "sClass": "center",
            "aTargets": [3]
        }]
    });
});

请参阅:http://jsfiddle.net/9De6w/