jQuery DataTables：添加额外的列-解网

问：

场景

我第一次使用数据表（@version 1.9.4）向用户显示数据。我成功地通过ajax检索了数据，并将它们绑定到数据表。

现在，我想添加额外的列，让用户处理记录。为了便于起见，目的是添加一个带有 onclick 处理程序的按钮，用于检索“点击”记录的数据。

在我的计划中，我会将与“clicked”记录对应的 json 项绑定到 onclick 处理程序。

到目前为止，如果我在 DOM 中为 action 列添加一个附加项，则数据表代码会发生错误：TH

Requested unknown parameter '5' from data source for row 0

问题

如何设置自定义列？如何用HTML填充他们的内容？

这是我的实际配置。

[HTML全

<table id="tableCities">
    <thead>
        <tr>
            <th>country</th>
            <th>zip</th>
            <th>city</th>
            <th>district code</th>
            <th>district description</th>
            <th>actions</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Java脚本

$('#tableCities').dataTable({
    "bPaginate": true,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": true,
    "bInfo": false,
    "bAutoWidth": true
    , "bJQueryUI": true
    , "bProcessing": true
    , "bServerSide": true
    , "sAjaxSource": "../biz/GetCitiesByZip.asp?t=" + t
});

示例 Json 结果

{
    "aaData":
    [
        [
            "IT",
            "10030",
            "VILLAREGGIA",
            "TO",
            "Torino"
        ],
        [
            "IT",
            "10030",
            "VISCHE",
            "TO",
            "Torino"
        ]
    ],
    "iTotalRecords": 2,
    "iTotalDisplayRecords": 2,
    "iDisplayStart": 0,
    "iDisplayLength": 2
}

编辑

丹尼尔是对的。解决方案是在中设置自定义列，指定和属性。特别是 mRender 允许定义自定义 html 和 javascript。aoColumnDefsmDatamRender

/* inside datatable initialization */
, "aoColumnDefs": [
   {
        "aTargets": [5],
        "mData": null,
        "mRender": function (data, type, full) {
            return '<a href="#" onclick="alert(\''+ full[0] +'\');">Process</a>';
        }
    }
 ]

DataTable JavaScript jQuery-UI 自定义

$(document).ready(function() {
  var table = $('#userTable').DataTable( {
        "sAjaxSource": "/MyApp/proctoring/user/getAll",
        "sAjaxDataProp": "users",
        "columns": [
                    { "data": "username" },
                    { "data": "name" },
                    { "data": "surname" },
                    { "data": "status" },
                    { "data": "emailAddress" },
                    { "data" : "userId" }
                  ],
        "aoColumnDefs": [
           {
                "aTargets": [5],
                "mData": "userId",
                "mRender": function (data, type, full) {
                    return '<button href="#"' + 'id="'+ data + '">Edit</button>';
                }
            }
         ]
    } );

    $('#userTable tbody').on( 'click', 'button', function () {
        var data = table.row( $(this).parents('tr') ).data();
        console.log(data);
        $('#userEditModal').modal('show');
    });

} );

0赞 Ragab Mohamad 3/29/2023 #4

行动

 [HttpGet]
        public JsonResult Roles()
        {
            var data = _accountService.GetRoles().Result;
            return Json(data);
        }

CDN网络

<link rel="stylesheet"
 href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css" /> 
 <script
 src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>

Html 格式

<table class="table table-hover" id="table">
                  <thead>
                      <tr>
                          <th>Code</th>
                          <th>Name</th>
                          <th></th>
                      </tr>
                  </thead>
              </table>

DataTable 代码

<script>
        $(document).ready(function(){
            debugger;
            $("#table").dataTable({
                "ajax": {
                    "url": "/Admistration/Roles",
                    "type": "GET",
                    "dataSrc": "",
                     "datatype": "json"
                },
               "columns": [
                    { "data": "code", "autoWidth": true },
                    { "data": 'name', "autoWidth":true},
                    { "render": function (data, type, full) { return "<a  class='btn btn-danger' onclick=DeleteCustomer('" + full.code + "') ><i class='bi bi-trash3-fill'></i></a>   <a href='#' class='btn btn-primary' onclick=DeleteCustomer('" + full.code + "'); ><i class='bi bi-pencil-square'></i></a>" } }
                ]
            });
        })
   
    </script>

上一个：如何在 Vue 3 中实现 Cookiebot

下一个：tsql 字符串中的最后一个“出现次数”

jQuery DataTables：添加额外的列

jquery datatables: adding extra column

评论

评论

评论