0

ユーザーが1つまたは複数の行を選択できるようにする機能をテーブルに追加しようとしています。これにより、ユーザーが削除ボタンをクリックした後、テーブルからアイテムを削除するサーバーにAjaxリクエストが送信されます。私は自分のページに追加したスクリプトである datatables Web サイトを見回してきましたが、これを完了するために正確に何が必要なのかわかりません。

$( '#table' ).dataTable({
    "sDom": '<"top"lTf<"clear">>rt<"actions"<"actions-left"i><"actions-right"p>>',
    "bAutoWidth": false,
    "sPaginationType" : "full_numbers",
    "oTableTools": {
    "aButtons": [
            {
                "sExtends":    "text",
                "sButtonText": "Add"
            },
            {
                "sExtends":    "text",
                "sButtonText": "Edit"
            },
            {
                "sExtends":    "text",
                "sButtonText": "Delete",
                "sAjaxUrl": "delete_title"
            },
        ]
    },
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [ 0 ] },
        { "sWidth": "20px", "aTargets": [ 0 ] },
        { "sWidth": "40px", "aTargets": [ 1 ] },
        { "sClass": "alignCenter", "aTargets": [ 1 ] }
    ]
});

<?php            
        $tmpl = array ( 'table_open'  => '<table class="table" id="titles-table">' );
        $data = array('name' => 'titles', 'class' => 'selectall');
        $this->table->set_heading(form_checkbox($data), 'ID', 'Title Name', 'Style', 'Status');            
        $this->table->set_template($tmpl);             
        foreach ($titles as $row)
        {
            $checkbox_data = array(
                'name'        => 'titles',
                'id'          => $row->id
            );
            $this->table->add_row(form_checkbox($checkbox_data), $row->id, $row->title_name, $row->type_name, $row->status_name);
        }
        echo $this->table->generate(); 
        ?>

他の誰かが私が見逃しているものを見ていますか?

4

2 に答える 2

1

代替ルートは、jquery / javascriptを単純に使用して入札を行うことです。これは、非常によく似たものに対して行った例です。これは、原因に対する直接の答えではありませんが、IDのクラスなどに一致するように変更された場合などです。あなたの大義のためにあなたを助けるためにたくさんすることができます

        $("#hideme").click(function(e)
        {
            e.preventDefault();
            var postArray = new Array();
            i=0;
            $("input:checked").each(function()
            {
                var theID = $(this).attr("name");
                theID = theID.replace("offerterms-", "");
                postArray.push(theID);
                $(this).parents("tr").animate(
                    {"color":"#FFF", "background-color":"#FFF"},
                    "5000",
                    function()
                    {
                        $("input:checked").parents("tr").remove();
                        $("table.datatable TR").removeClass("darkrow");
                        $("table.datatable TR:odd").addClass("darkrow");
                    });
            });
            $.post("./hide/", {"entry":postArray}, function(data)
            {
                if((".datatable tr").length == 1){$(".datatable").hide();$("#hideme").hide();$("#recordCount").text("0");}
                else{$("#recordCount").text((parseInt($("#recordCount").text())-1));}
                //alert(data.msg);
            }, "json");
        });

これが行うことは、基本的にテーブルを反復処理し、チェックされたチェックボックスの配列を構築してバックエンドに投稿します。そのとき、その配列を使用してdbエントリを処理し、私の場合はデータの非表示を実行して、使用できるように非表示にします。管理者がそれらを表示し、後で再表示できる別の同様のテーブルで..とにかく、テーブルを反復処理している間、チェックボックスがオンになっているすべての行を行ごとに非表示にします。

于 2012-07-18T19:03:54.177 に答える
1

Server Side Processingの例を確認してください。

sAjaxSource を DataTable 初期化に追加し、そこで削除を定義する必要があります。また、追加のサーバー パラメータをサーバー側にプッシュする必要がある場合もあります。次のようなものを使用できます。

//Example from one of my projects:
//This adds extra data to the ajax request sent by datatables. 
"fnServerParams": function (aoData) {
        aoData.push({ "name": "bu", "value": BU });
        aoData.push({ "name": "SLAName", "value": SLANAME });
        aoData.push({ "name": "substep", "value": STEP });
        aoData.push({ "name": "timeperiod", "value": TIME });
        var UserFilter = $("#userFilter").val();
        aoData.push({ "name": "user", "value": UserFilter });
    }

さらにヘルプや詳細が必要な場合は、お問い合わせください。

//編集1

$( '#table' ).dataTable({
"sDom": '<"top"lTf<"clear">>rt<"actions"<"actions-left"i><"actions-right"p>>',
"bAutoWidth": false,
"sPaginationType" : "full_numbers",
"sAjaxSource" : "/path/to/function",
"fnServerParams": function (aoData) {
    aoData.Push(ArrayWithCheckboxInfo);
},
"oTableTools": {
"aButtons": [
        {
            "sExtends":    "text",
            "sButtonText": "Add"
        },
        {
            "sExtends":    "text",
            "sButtonText": "Edit"
        },
        {
            "sExtends":    "text",
            "sButtonText": "Delete",
            "sAjaxUrl": "delete_title"
        },
    ]
},
"aoColumnDefs": [
    { "bSortable": false, "aTargets": [ 0 ] },
    { "sWidth": "20px", "aTargets": [ 0 ] },
    { "sWidth": "40px", "aTargets": [ 1 ] },
    { "sClass": "alignCenter", "aTargets": [ 1 ] }
]

});

次に、サーバー側で、配列からの情報に基づいてチェックボックスを処理します。行をデータテーブルまたはデータベースから削除するかどうかはわかりませんが、両方を行うことができ、更新されたデータがクライアントに送信されます。

于 2012-07-17T14:00:29.227 に答える