如何在数据表的每一行上添加按钮?

IT技术 javascript jquery datatables
2021-02-24 16:02:09

我是 DataTables 的新手。我想在每一行添加按钮进行编辑和删除(如下图)

在此处输入图片说明

我试过代码:

测试.cfm

<table id="myDataTable" class="table table-striped table-bordered">
<thead>
    <tr>
        <th>UserID</th>
        <th>Name</th>
        <th>UserName</th>
        <th>Passowrd</th>
        <th>Email</th>
         <th>IsActive</th>
         <th>Command</th>
    </tr>
</thead>
<tbody> 
</tbody>

$(document).ready(function () {
    var oTable = $('#myDataTable').dataTable({
       // "bServerSide": true,
        "sAjaxSource": "fetchUserData.cfm",
        "bProcessing": true,
        "sPaginationType": "full_numbers",
        "aoColumns": [
            { "mData": null },
            { "mData": "Name", "sTitle": "Name" , "sWidth": "20%"},
            { "mData": "UserName", "sTitle": "UserName", "sWidth": "20%" },
            { "mData": "Passowrd","sTitle": "Passowrd", "sWidth": "20%"  },
            { "mData": "Email","sTitle": "Email"  , "sWidth": "20%"},
            { "mData": "IsActive","sTitle": "IsActive" , "sWidth": "20%" },
            {
                "mData": null,
                "bSortable": false,
               "mRender": function (o) { return '<a href=#/' + o.userid + '>' + 'Edit' + '</a>'; }
            }
        ]
    });

} );

fetchUserData.cfm

{
"aaData": [
    [
        "1",
        "sameek",
        "sam",
        "sam",
        "sameek@test.com",
        "1",
        ""
    ],
    [
        "2",
        "arun singh",
        "arun",
        "arun",
        "arunsingh@test.com",
        "0",
        ""
    ],
    [
        "9",
        "s s",
        "sam3",
        "sam3",
        "ss@s.com",
        "0",
        ""
    ],
    [
        "10",
        "sameek mishra",
        "sam56",
        "sam",
        "same@s.com",
        "0",
        ""
    ],
    [
        "11",
        "narendra kumar",
        "narendra",
        "nav",
        "sa@sa.com",
        "1",
        ""
    ],
    [
        "12",
        "test test",
        "test",
        "test",
        "test2@test.com",
        "1",
        ""
    ]
]
 }
6个回答

基本上你的代码没问题,这是正确的方法。总之,有一些误解:

  1. fetchUserData.cfm 不包含键/值对。所以在 mData 中寻址键是没有意义的。只需使用mData[index]

  2. dataTables 期望您的服务器端提供更多信息。至少你应该告诉数据表你的服务器端总共有多少项目以及有多少项目被过滤。我只是将此信息硬编码到您的数据中。您应该从服务器端脚本中的计数中获得正确的值。

    {
     "iTotalRecords":"6",
     "iTotalDisplayRecords":"6",
      "aaData": [
    [
        "1",
        "sameek",
        "sam",
        "sam",
        "sameek@test.com",
        "1",
        ""
    ],...
    
  3. 如果已经在 html 部分设置了列名,则不需要添加 sTitle。

  4. mRender 函数接受三个参数:

    • data = 此单元格的数据,如 mData 中所定义
    • type = 数据类型(大部分可以忽略)
    • full = 该行的完整数据数组。

所以你的 mRender 函数应该是这样的:

  "mRender": function(data, type, full) {
    return '<a class="btn btn-info btn-sm" href=#/' + full[0] + '>' + 'Edit' + '</a>';
  }

在这里找到一个工作的Plunker

是否可以在 pre-datatables-transformed 中添加按钮<html>我的页面有 6 列,但最右边的 2 列是静态按钮。当我将它们中的每一个放在每一行,然后使用服务器端获取具有 4 个键值对的 JSON 对象数组时,HTML 在开头显示 2 个按钮,但随后立即隐藏它们。
2021-04-25 16:02:09
为迟到的评论道歉......但是你如何Click向该anchor标签添加事件
2021-04-29 16:02:09
如果您想将多个按钮添加到单个列中,您将如何执行此操作?
2021-05-11 16:02:09
我其实是这么回答的。您要做的是返回每个按钮的数组。return new array('<a class="btn btn-info btn-sm" href=#/' + full[0] + '>' + 'Edit' + '</a>', '<a class="btn btn-info btn-sm" href=#/' + full[0] + '>' + 'Delete' + '</a>');. 当然,使用 new array() 是不受欢迎的(使用 []),但这个想法是成立的。
2021-05-16 16:02:09
var table =$('#example').DataTable( {
    data: yourdata ,
    columns: [
        { data: "id" },
        { data: "name" },
        { data: "parent" },
        { data: "date" },

        {data: "id" , render : function ( data, type, row, meta ) {
              return type === 'display'  ?
                '<a href="<?php echo $delete_url;?>'+ data +'" ><i class="fe fe-delete"></i></a>' :
                data;
            }},
    ],
    }
}
太好了,我认为这种方法比其他方法更有意义。然而,我在附加 JS 函数时遇到了一些麻烦。
2021-05-08 16:02:09
在回答问题时,您应该随解决方案一起提供解释,而不仅仅是发布代码。这将使答案对原始海报以及可能发现此问题的其他人更有用。
2021-05-17 16:02:09

看看这里...这对我很有帮助 https://datatables.net/examples/ajax/null_data_source.html

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": "data/arrays.txt",
        "columnDefs": [ {
        "targets": -1,
        "data": null,
        "defaultContent": "<button>Click!</button>"
    } ]
} );

$('#example tbody').on( 'click', 'button', function () {
    var data = table.row( $(this).parents('tr') ).data();
    alert( data[0] +"'s salary is: "+ data[ 5 ] );
    } );
} );

我贡献了我的按钮设置:查看、编辑和删除。最后一列有数据:null 在属性 defaultContent 的末尾添加了一个字符串,表示 HTML 代码。并且由于它是最后一列,因此在指示列时通过targets 属性用索引-1 指示。

//...
columns: [
    { title: "", "data": null, defaultContent: '' }, //Si pone da error al cambiar de paginas la columna index con numero de fila
    { title: "Id", "data": "id", defaultContent: '', "visible":false },
    { title: "Nombre", "data": "nombre" },
    { title: "Apellido", "data": "apellido" },
    { title: "Documento", "data": "tipo_documento.siglas" },
    { title: "Numero", "data": "numero_documento" },
    { title: "Fec.Nac.", format: 'dd/mm/yyyy', "data": "fecha_nacimiento"}, //formato
    { title: "Teléfono", "data": "telefono1" },
    { title: "Email", "data": "email1" }
    , { title: "", "data": null }
],
columnDefs: [
    {
        "searchable": false,
        "orderable": false,
        "targets": 0
    },
    { 
      width: '3%', 
      targets: 0  //la primer columna tendra una anchura del  20% de la tabla
    },
    {
        targets: -1, //-1 es la ultima columna y 0 la primera
        data: null,
        defaultContent: '<div class="btn-group"> <button type="button" class="btn btn-info btn-xs dt-view" style="margin-right:16px;"><span class="glyphicon glyphicon-eye-open glyphicon-info-sign" aria-hidden="true"></span></button>  <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button><button type="button" class="btn btn-danger btn-xs dt-delete"><span class="glyphicon glyphicon-remove glyphicon-trash" aria-hidden="true"></span></button></div>'
    },
    { orderable: false, searchable: false, targets: -1 } //Ultima columna no ordenable para botones
], 
//...

在此处输入图片说明

看一看。

$(document).ready(function () {     
        $('#datatable').DataTable({
            columns: [
                { 'data': 'ID' },
                { 'data': 'AuthorName' },
                { 'data': 'TotalBook' },
                { 'data': 'DateofBirth' },
                { 'data': 'OccupationEN' },   
                { 'data': null, title: 'Action', wrap: true, "render": function (item) { return '<div class="btn-group"> <button type="button" onclick="set_value(' + item.ID + ')" value="0" class="btn btn-warning" data-toggle="modal" data-target="#myModal">View</button></div>' } },
            ],            
            bServerSide: true,
            sAjaxSource: 'EmployeeDataHandler.ashx'           
        });       
    });