4

第一次在这里发帖，但我真的需要帮助。在这个小项目上工作了一段时间，我发现 Datatables 几乎没用，但我被告知我必须使用它......无论如何，我已经得到它显示我们从 ajax 调用到我们的 SQL 服务器的表。它需要让用户选择几行并单击删除按钮。然后它应该从每个选定的行中获取 ID 并通过 ajax 调用将其传递回我们的服务器，然后服务器将删除该值。

我尝试了大约 5 种差异行选择方法，更多的删除尝试然后我可以数数，但没有任何工作。在过去的几周里，我多次在他们的支持网站上寻求帮助，但没有得到一个答复，所以希望这里的人们能够提供更多帮助:)

无论如何继承我的代码：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 时，您必须将要从数据表中删除的行传递给它。为此，您必须使用 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

您需要将 包装aTrs[i]在 a 中$()，这样$(aTrs[i]).hasClass('row_selected')才能访问 jQuery 方法。

您还应该使用处理程序，.on而不是因为数据表可以重新创建节点并已被弃用的方式。clicklivelive

如果您返回来自 的响应示例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 回答