JQuery DataTable 添加属性以自定义按钮

Question

我正在尝试使用自定义按钮构建 JQuery DataTable。这是我的代码：

<table id="myDataTable" class="display" width="100%">
            <thead>
                <tr>      
                    <th> </th>                
                    <th>Company name</th>
                    <th>Address</th>
                    <th>Town</th>                             
                    <th></th>                                         
                </tr>
            </thead>
            <tbody>                
            </tbody>
        </table>
    </div>
</div>

<script>
    $(document).ready(function () {

        $('#myDataTable').dataTable({
            "bServerSide": true,
            "sAjaxSource": "Home/GetDataTable",
            "bProcessing": true,
            "aoColumns": [
            {"data": "ID"},
            { "data": "Name" },
            { "data": "Address" },
            { "mData": "Town" },           
            {
                 bSortable: false,
                 data: null,
                 className: "center",
                 defaultContent: '<button class="btn btn-danger data-id="" ">edit</button> <button class="btn btn-primary">delete</button>'
             }
            ],
            "columnDefs": [
           {
               "targets": [ 0 ],
               "visible": false,
               "searchable": false
           },          
            ]      
        });
    });
</script>

这是我在Action中的Controller：

return Json(new
            {
                sEcho = param.sEcho,
                iTotalRecords = result.Count(),
                iTotalDisplayRecords = result.Count(),
                aaData = result
            },
        JsonRequestBehavior.AllowGet);
        }

这段代码运行良好，但现在我想将data-id 属性添加到我的按钮。我想将每行的 ID field （我隐藏）的值设置为 data-id 属性。我该如何实施？

Answer 1

你好，你能测试一下这段代码吗：

         {
                bSortable: false,
                data: null,
                render: function(d) {
                    return "<button class="btn btn-danger data-id="'+ d.YourModelID +'" ">edit</button> <button class="btn btn-primary">delete</button>";
                },
                className: "center",
            }

而不是这个：

         {
             bSortable: false,
             data: null,
             className: "center",
             defaultContent: '<button class="btn btn-danger data-id="" ">edit</button> <button class="btn btn-primary">delete</button>'
         }

Answer 2

<script>
    $(document).ready(function () {

        $('#myDataTable').dataTable({
            "bServerSide": true,
            "sAjaxSource": "Home/GetDataTable",
            "bProcessing": true,
            "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                // if your button is in 5th column then index will be 4 because it starts from 1
               $('td:eq(4)', nRow).find( 'button' ).attr('id',aData[0]); 
               //assuming your id is in the 1st element of data

            },
            "aoColumns": [
            {"data": "ID"},
            { "data": "Name" },
            { "data": "Address" },
            { "mData": "Town" },           
            {
                 bSortable: false,
                 data: null,
                 className: "center",
                 defaultContent: '<button class="btn btn-danger data-id="" ">edit</button> <button class="btn btn-primary">delete</button>'
             }
            ],
            "columnDefs": [
           {
               "targets": [ 0 ],
               "visible": false,
               "searchable": false
           },          
            ]      
        });
    });
</script>