Таблицы данных, выберите строки и введите идентификатор обратной связи для удаления

Question

Первоначальная публикация здесь, но мне действительно нужна помощь. Некоторое время я работал над этим маленьким проектом и обнаружил, что Datatables будет рядом с бесполезным, но им говорят, что я должен его использовать ... В любом случае Ive получил его, отображая нашу таблицу из вызова ajax на наш SQL-сервер. Он должен позволить пользователю выбрать несколько строк и нажать кнопку «Удалить». Затем он ДОЛЖЕН получить идентификатор из каждой выбранной строки и передать его обратно через вызов ajax на наш сервер, который затем удалит значение.

Ive пробовал около 5 методов выбора строк, больше попыток удаления, затем я могу подсчитать, а НИЧЕГО не работает. Ive просил о помощи на их сайте поддержки несколько раз за последние пару недель, и нету получил ни одного ответа так желавшему людей здесь может быть в состоянии помочь больше :)

Во всяком случае мой код Херес: 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, вы должны передать строку или строки, чтобы удалить ее из datatable. Для этого вам нужно использовать oTableLocal. $ ("Tr"), чтобы получить строки из datatable.

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 из-за способа, что DataTable может воссоздавать узлы и 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"; 
       } 
    }] 
     } 
    }); 
});