web-dev-qa-db-ja.com

データテーブルの各行にボタンを追加するにはどうすればよいですか？

私はDataTablesの初心者です。編集と削除のために各行にボタンを追加したい（下の画像のように）

enter image description here

私はコードで試しました：

Test.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",
        "[email protected]",
        "1",
        ""
    ],
    [
        "2",
        "arun singh",
        "arun",
        "arun",
        "[email protected]",
        "0",
        ""
    ],
    [
        "9",
        "s s",
        "sam3",
        "sam3",
        "[email protected]",
        "0",
        ""
    ],
    [
        "10",
        "sameek mishra",
        "sam56",
        "sam",
        "[email protected]",
        "0",
        ""
    ],
    [
        "11",
        "narendra kumar",
        "narendra",
        "nav",
        "[email protected]",
        "1",
        ""
    ],
    [
        "12",
        "test test",
        "test",
        "test",
        "[email protected]",
        "1",
        ""
    ]
]
 }
javascriptjquerydatatables
40
Sameek Mishra

基本的にあなたのコードは大丈夫です、これが正しい方法です。とにかく、いくつかの誤解があります：

  1. fetchUserData.cfmにはキー/値のペアが含まれていません。したがって、mDataでキーをアドレス指定することは意味がありません。 mData[index]を使用するだけです

  2. dataTablesは、サーバーサイドからの情報をさらに期待しています。少なくとも、データテーブルにサーバーサイドにあるアイテムの合計数とフィルターされるアイテムの数を伝える必要があります。この情報をデータにハードコーディングしました。サーバー側のスクリプトのカウントから正しい値を取得する必要があります。

    {
 "iTotalRecords":"6",
 "iTotalDisplayRecords":"6",
  "aaData": [
[
    "1",
    "sameek",
    "sam",
    "sam",
    "[email protected]",
    "1",
    ""
],...

  3. Htmlパーツに列名が既に設定されている場合、sTitleを追加する必要はありません。

  4. MRender関数は3つのパラメーターを取ります。

    • data = mDataで定義されているこのセルのデータ
    • type =データ型（ほとんど無視できます）
    • full =この行の完全なデータ配列。

したがって、mRender関数は次のようになります。

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

稼働中のプランカーを見つける ここ

37
mainguy

ここを見てください...これは私にとって非常に役に立ちました 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 ] );
    } );
} );
8
plassede senra
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;
            }},
    ],
    }
}
4
Majid.r

私はボタンの設定で貢献します：表示、編集、削除。最後の列にはデータがあります：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
], 
//...

ここに画像の説明を入力

1
user2341112

レスポンシブデータテーブルを使用すると、このソリューションは機能しません

0
NIDIA RAMIREZ

私のレシピ：

データテーブル宣言：

defaultContent: "<button type='button'....

イベント：

$('#usersDataTable tbody').on( 'click', '.delete-user-btn', function () { var user_data = table.row( $(this).parents('tr') ).data(); }
0
Rolando