DataTables，选择行并返回ID删除

Question

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

我试过大约5个差异行选择方法，更多的删除尝试，然后我可以计数，没有任何工作。香港专业教育学院要求帮助他们的支持网站几次，在过去的几个星期，并还没有得到一个答复，从而希望这里的人们也许能帮助更多的:)

反正我的继承人代码：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方法。

你也应该使用，因为该数据表可以重新创建节点和live已过时的方式.on处理程序，而不是click或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"; 
       } 
    }] 
     } 
    }); 
});