Question

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

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

无论如何继承我的代码：JSFIDDLE 更新为当前

$(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!");
        }  
    });
});
} );

任何帮助都会很棒!!!

Answer 1

当您使用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;
}

Answer 2

您需要将aTrs[i]包装在$()中，就像$(aTrs[i]).hasClass('row_selected')一样，以便访问jQuery方法。

您还应该使用.on处理程序而不是click或live，因为数据表可以重新创建节点并且不推荐使用live。

如果您从dataTable/getCmsGroupData返回回复示例，我可以提供更多帮助。

Answer 3

修好了！ :)感谢大家的帮助!!

$(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";
                }
     }]
        }
    });
});

DataTables，选择行并传回ID以进行删除

3 个答案: