Question

我正在使用插件“DataTables”，我想逐行添加图片，当用户点击时，调用另一个网址。

我按照www.datatables.net的例子，但是给出了以下错误：

DataTables warning（table id ='myDataTable'）：从第0行的数据源请求未知参数'4'。

记录显示在屏幕上

<h2>Index</h2>

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

        var oTable = $('#myDataTable').dataTable({
            "bServerSide": true,
            "sAjaxSource": "AjaxHandler",
            "bProcessing": true,
            "sPaginationType": "full_numbers",   
            "aoColumns": [
                        { "mDataProp": "ID", "bSortable": false },
                        { "mDataProp": "Nome", "sTitle": "Identificação do produto" },
                        { "mDataProp": "Address", "sTitle": "Descrição do produto" },
                        { "mDataProp": "Town" },
                        { "fnRender": function (o) {return '<a href=/Produto/Detalhar/' + o.aData[0] + '>' + 'More' + '</a>';}} 
            ],
        });
    });
</script>


<table id="myDataTable" class="display">
    <thead>
        <tr>
            <th>ID</th>
            <th>Company name</th>
            <th>Address</th>
            <th>Town</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody> 
    </tbody>
</table>

Answer 1

我正在使用dataTables版本1.10.0-dev，并且接受的解决方案对我不起作用，因为o.aData未定义。相反，我拥有json对象的所有属性，我将在o中返回服务器端。所以这是我的解决方案：

$(document).ready(function () {
    var oTable = $('#myDataTable').dataTable({
        "bServerSide": true,
        "sAjaxSource": "AjaxHandler",
        "bProcessing": true,
        "sPaginationType": "full_numbers",
        "aoColumns": [
            { "mData": "ID", "bSortable": false },
            { "mData": "Nome", "sTitle": "Identificação do produto" },
            { "mData": "Address", "sTitle": "Descrição do produto" },
            { "mData": "Town" },
            {
                "mData": null,
                "bSortable": false,
                "mRender": function (o) { return '<a href=/Produto/Detalhar/' + o.Id + '>' + 'More' + '</a>'; }
            }
        ]
    });
});

我不知道这是否取决于新版本的dataTables或其他配置（但我的表格配置方式相同......）。

Answer 2

我真的不知道数据表（不够），但你应该尝试这种方式：{不确定mDataProp是否已被弃用}

$(document).ready(function () {

        var oTable = $('#myDataTable').dataTable({
            "bServerSide": true,
            "sAjaxSource": "AjaxHandler",
            "bProcessing": true,
            "sPaginationType": "full_numbers",   
            "aoColumns": [
                        { "mData": "ID", "bSortable": false },
                        { "mData": "Nome", "sTitle": "Identificação do produto" },
                        { "mData": "Address", "sTitle": "Descrição do produto" },
                        { "mData": "Town" },
                        {   "mData": null,
                    "bSortable": false,
            "mRender": function (o) {return '<a href=/Produto/Detalhar/' + o.aData[0] + '>' + 'More' + '</a>';}
            }   
            ]
        });
    });

确保您的数据符号与您的列声明一致，您应该将ajax响应作为带有数据ID，Nome，地址和城镇的json。如果你的第一个数据是id而不是ID，我认为你会收到错误。

为插件JQuery DataTables添加按钮行

2 个答案: