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