web-dev-qa-db-ja.com

jquery dataTables-編集および削除オプションを追加する方法

私は次のコードを持っています： http://jsfiddle.net/5ooyertu/1/

現在、サーバー側を介してテーブルに適切にデータが入力されており、ページングは​​機能しています。ただし、行を削除または編集する機能を追加したいと思います。 「アクション」という2つの列を追加します。1つは編集メソッドに、もう1つは削除メソッドに使用します。

DataTablesを使用する前に、Ajaxからのレコードの配列を反復処理し、データと適切なハイパーリンクで通常のテーブルを呼び出してデータを取り込むJavaScriptロジックがいくつかありました。

 for (var i=0; i < data.length; i++) {
  if (data[i].grp == 0) {
     tr.append("<a href='add.html?id=" + data[i].id + "&pid=" + data[i].pid + "&destination=" + data[i].destination + "&name=" + data[i].name.replace("'", "%27") + "'</a><button class='btn btn-xs btn-primary'>Edit</button>&nbsp;</td>");
     tr.append("<button class='btn btn-xs btn-primary' onclick='delete(" + data[i].id + "," + data[i].pid + ");'>Delete</button></td>")

 } else {
     tr.append("<a href='update_group.html?id=" + data[i].id + "&pid=" + data[i].pid + "&destination=" + data[i].destination + "&name=" + data[i].name.replace("'", "%27") + "'</a><button class='btn btn-xs btn-primary'>Edit</button>&nbsp;</td>");
     tr.append("<button class='btn btn-xs btn-primary' onclick='delete(" + data[i].id + "," + data[i].pid + ",true);'>Delete</button></td>")
  }
}

上記のコード例からわかるように、私のハイパーリンクでは、クエリ文字列の一部として（編集の場合）各行からいくつかのデータを渡すか、単にパラメーターとして別の行に渡す必要がありますこのdataTableと同じファイルにある「削除」と呼ばれるJavaScript関数。そして、それは条件付きです...意味、ハイパーリンクはgrpがtrue/falseであるかどうかによって変わります。

DataTableに入力するロジックをどのように変更して、これらの2つのハイパーリンクを含めることができるのでしょうか？

このリンクを見つけました： http://datatables.net/forums/discussion/5862/creating-an-action-column-for-icons-view-edit-delete# しかし、コードは私のために働いて、私はどこかでfnRenderメソッドが非推奨になったと読んだと思います。

何か提案があれば、感謝します。

EDIT 1

コードを次のように変更しようとしました：

$(document).ready(function() {
    var selected = [];
    $('#users').DataTable( {

        "serverSide": true,
        "ordering": false,
         aLengthMenu: [
                [10, 25, 50, 100, "-1"],
                [10, 25, 50, 100, "All"]
        ],
        "ajax": "/cgi-bin/test",
        "rowCallback": function( row, data ) {
            if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
                $(row).addClass('selected');
            }
        },
        "columns": 
        [    
                { "data": "id" ,"searchable":false},
                { "data": "name","searchable":true},    
                { "data": "pid", "searchable":true },    
                { "data": "destination", "searchable":true },
                {"mRender": function ( data, type, row ) {
                        return '<a href=add.html?id="'+row[0]+'">Edit</a>';}
                }
        ]
    } );

} );

レンダリングする呼び出し参照に注意してください。また、HTMLコードでテーブルに新しい列を追加しました。ハイパーリンクを取得します！しかし、残念ながら、リンクは正しくありません。 row [0]は「未定義」を返します。また、フィールド「destination」の値に応じて、作成するハイパーリンクを変更する方法がまだわかりません。だから、例えば、私はこのような何かをしたい：（擬似コード）

if row[i].destination = 'Group' then
                    {"mRender": function ( data, type, row ) {
                            return '<a href=group.html?id="'+row[0]+'">Edit</a>';}
                    }
else
                    {"mRender": function ( data, type, row ) {
                            return '<a href=add.html?id="'+row[0]+'">Edit</a>';}
                    }
end

EDIT 2

このコードは機能しているようです：

$（document）.ready（function（）{var selected = []; $（ '＃users'）。DataTable（{

        "serverSide": true,
        "ordering": false,
         aLengthMenu: [
                [10, 25, 50, 100, "-1"],
                [10, 25, 50, 100, "All"]
        ],
        "ajax": "/cgi-bin/test",
        "rowCallback": function( row, data ) {
            if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
                $(row).addClass('selected');
            }
        },
        "columns": 
        [    
                { "data": "id" ,"searchable":false},
                { "data": "name","searchable":true},    
                { "data": "pid", "searchable":true },    
                { "data": "destination", "searchable":true },
                {"mRender": function ( data, type, row ) {
                        return '<a href=add.html?id='+row.id+'>Edit</a>';}
                }
        ]
    } );

今、私はそれを条件付きにする方法を理解する必要があります。

javascriptjqueryhtmljquery-datatables
6
dot

ここでは、以下を想定した例があります。

  • アヤックス人口
  • データ行は4列を含む配列です
  • データ行の最初の列にIDが含まれています
  • テーブルにIDを表示しないため、非表示にします

それをあなたのニーズに合わせるのは難しくないはずです。チェック columns 使用

var datatablesOptions = {
    "serverSide": true,
    "ajaxSource": '[yourAjaxUrl]',
    "processing": true,
    "columns": [
        { bVisible = false }, // assume this is the id of the row, so don't show it
        null,
        null,
        null,
        /* EDIT */ {
            mRender: function (data, type, row) {
                return '<a class="table-edit" data-id="' + row[0] + '">EDIT</a>'
            }
        }
        /* DELETE */ {
            mRender: function (data, type, row) {
                return '<a class="table-delete" data-id="' + row[0] + '">DELETE</a>'
            }
        },              
     ]
};
$('#table').dataTable(datatablesOptions);

[〜＃〜] edit [〜＃〜]

destinationに応じて異なるものを条件付きでレンダリングする必要がある場合

mRender: function (data, type, row) {
    if (row.destination == "d1") {
        return '<a href="destination1?id=' + row.id + '">EDIT</a>'
    }else (row.destination == "d2"){
        return '<a href="destination2?id=' + row.id + '">EDIT</a>'
    } else {
        // some error telling that destination value is unexpected
    }
}
10
Claudio Redi

列のスニペット部分を見てください

columns: [
    { 'data': 'LastName' },
    { 'data': 'FirstMidName' },
    { 'data': 'EnrollmentDate' },
    {// this is Actions Column 
        mRender: function (data, type, row) {
            var linkEdit = '@Html.ActionLink("Edit", "Edit", new {id= -1 })';
            linkEdit = linkEdit.replace("-1", row.ID);

            var linkDetails = '@Html.ActionLink("Details", "Details", new {id= -1 })';
            linkDetails = linkDetails.replace("-1", row.ID);

            var linkDelete = '@Html.ActionLink("Delete", "Delete", new {id= -1 })';
            linkDelete = linkDelete.replace("-1", row.ID);

            return linkDetails + " | " + linkEdit + " | " + linkDelete;
        }
    }

これは私のJsonからの抜粋です

{ID: 1, LastName: "Alexander", FirstMidName: "Carson", EnrollmentDate: "/Date(1126386000000)/",…}

ASP.Net MVCを使用していることに注意してくださいHtml.ActionLinkリンクを返すだけ

結果は enter image description here

6
Basheer AL-MOMANI

DataTablesは、編集および削除操作をサポートしています。削除は次のように非常に簡単です。

$('#id tbody').on('click', function(){
    table
        .row($(this).parents('tr'))
        .remove()
        .draw();
});

この例を確認してください： https://editor.datatables.net/examples/simple/inTableControls.html

1
CrazyPaste