4

ここに初めて投稿しますが、本当に助けが必要です。この小さなプロジェクトにしばらく取り組んでいて、Datatables が役に立たないことがわかりましたが、それを使用する必要があると言われました....とにかく、SQL サーバーへの ajax 呼び出しからテーブルを表示するようになりました。ユーザーがいくつかの行を選択して削除ボタンをクリックできるようにする必要があります。次に、選択された各行から ID を取得し、ajax 呼び出しを介してサーバーに返す必要があります。サーバーは値を削除します。

私は約5つの差分行選択方法を試しましたが、数え切れないほど多くの削除を試みましたが、何も機能していません。過去数週間にわたってサポートサイトで何度か助けを求めましたが、返信が1つもなかったので、ここの人々がもっと助けてくれることを願っています:)

とにかく、私のコードは次のとおりです。JSFIDDLE UPDATED TO CURRENT

$(document).ready(function(){
var oTable = $('#dataTable').dataTable({
    //"bServerSide": true,
    "bProcessing": true,
    "bJQueryUI": true,
    "bPaginate": true,
    "sPaginationType": "full_numbers",

    "iDisplayLength": 10,
    "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    "sDom": 'pT<><f>rt<il>',
    "sAjaxSource": 'dataTable/getCmsGroupData',

    "aoColumns": [
                    { "mData": "id", "sTitle": "ID", 
                        "fnRender": function (oObj) {
                            return '<a href="cmsgroup_update?id='+ oObj.aData["id"] + '">' + oObj.aData["id"] + '</a>';
                          }},
                    { "mData": "version", "sTitle":"Version" },
                    { "mData": "name", "sTitle": "Name" },
                    { "mData": "description", "sTitle": "Description"},
                    { "mData": "notes", "sTitle": "Notes"},
                 ],
    "oTableTools": {
        "aButtons": [
                    "select_all",
                    "select_none", 
                    {
                        "sExtends": "text",
                        "sButtonText": "Create New Entry",
                        "fnClick": function ( nButton, oConfig, oFlash ) {
                            window.location = "cmsgroup_add";
                       }
                    }]
                }               
            });



$("#dataTable tbody").click(function(event) {
    $(oTable.fnSettings().aoData).each(function (){
        $(this.nTr).removeClass('row_selected');
    });
    $(event.target.parentNode).addClass('row_selected');
});



function fnGetSelected( oTableLocal )
{
    var aReturn = new Array();
    var aTrs = oTableLocal.fnGetNodes();
    for ( var i=0 ; i<aTrs.length ; i++ )
    {

        if ( $(aTrs[i]).hasClass('row_selected') ) 
        {
            aReturn.push( aTrs[i] );
        }
    }
    return aReturn;
}

$("#delete").click(function(){

    selected = fnGetSelected(oTable);
    oTable.fnDeleteRow( selected[0]);
    $.ajax({
        type: "POST",
        url: "dataTable/delete/cmsGroup",  
        data:   'tableData='+ $(selected).text(),  
        success: function(result) {  
            alert("worked!");
        }  
    });
});
} );

どんな助けでも素晴らしいでしょう!!!

4

3 に答える 3

2

fnDeleteを使用する場合、データテーブルから削除する1つまたは複数の行を渡す必要があります。これを行うには、oTableLocal。$（ "tr"）を使用してデータテーブルから行を取得する必要があります。

function fnGetSelected( oTableLocal )
{
    var aReturn = new Array();
    oTableLocal.$("tr").filter(".row_selected").each(function (index, row){
        aReturn.push(row);// this should work, if not try aReturn.push($(row));
       //to get the information in the first column 
       aReturn.push($(row).eq(0).text());
    return aReturn;
}
于 2013-02-15T02:49:07.293 に答える
1

jQueryメソッドにアクセスするにaTrs[i]は$()、のようにをラップする必要があります。$(aTrs[i]).hasClass('row_selected')

また、datatableがノードを再作成でき、非推奨になる方法では.onなく、clickまたはそのために、ハンドラーを使用する必要があります。livelive

からの応答の例を返送していただければdataTable/getCmsGroupData、さらにサポートさせていただきます。

于 2013-02-13T20:34:12.427 に答える
1

直った！:) みんな助けてくれてありがとう!!

$(document).ready(function () {
    var oTable = $('#dataTable').dataTable({
        //"bServerSide": true,
        "bProcessing": true,
        "bJQueryUI": true,
        "bPaginate": true,
        "sPaginationType": "full_numbers",

        "iDisplayLength": 10,
        "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        "sDom": 'pT<><f>rt<il>',
        "aAjaxSource": 'dataTable/getCmsAttributeData',

        "aoColumns": [{
            "mData": "id",
            "sTitle": "ID",
            "fnRender": function (oObj) {
                return '<a href="cmsattribute_update?id=' + oObj.aData["id"] + '">' + oObj.aData["id"] + '</a>';
            }
        },
        {
            "mData": "version:",
            "sTitle": "Version"
                },
        {
            "mData": "name:",
            "sTitle": "name"
                },
        {
            "mData": "description",
            "sTitle": "Description"
                },
        {
            "mData": "cmsgroupid",
            "sTitle": "CMS Group ID"
                },
        {
            "mData": "masterattributeid",
            "sTitle": "Master Attribute ID"
                },
        {
            "mData": "notes",
            "sTitle": "Notes"
                }],
        "oTableTools": {
            "aButtons": [{
                "sExtends": "text",
                "sButtonText": "Delete",
                "fnClick": function (nButton, oConfig, nRow) {
                    if (confirm('Are you sure want to delete this record?')) {
                        var list = $('tr.DTTT_selected > td.sorting_1 > a').map(function () {
                            return this.text;
                        }).get().join(",");
                        $.ajax({
                            type: "POST",
                            url: "dataTable/delete/cmsGroup",
                            data: 'tableData=' + list,
                            success: function (result) {
                                alert("Entry Deleted");
                                $('tr.DTTT_selected').remove();
                            }
                        });
                    }
                }
            },
     "select_all",
     "select_none",
            {
                "sExtends": "text",
                "sButtonText": "Create New Entry",
                "fnClick": function (nButton, oConfig, oFlash) {
                    window.location = "cmsgroup_add";
                }
     }]
        }
    });
});
于 2013-02-15T19:04:54.080 に答える