试图添加Ajax请求到数据表

Question

我试图添加一些功能到我的表，将允许用户选择一个或多个行，以便用户单击删除按钮后，它会发送一个Ajax请求到服务器它将在哪里删除表格中的项目。我一直在查看datatables网站，这是我添加到我的页面的脚本，并且有很多我不确定完成此操作需要什么。

$('#table').dataTable({ 
    "sDom": '<"top"lTf<"clear">>rt<"actions"<"actions-left"i><"actions-right"p>>', 
    "bAutoWidth": false, 
    "sPaginationType" : "full_numbers", 
    "oTableTools": { 
    "aButtons": [ 
      { 
       "sExtends": "text", 
       "sButtonText": "Add" 
      }, 
      { 
       "sExtends": "text", 
       "sButtonText": "Edit" 
      }, 
      { 
       "sExtends": "text", 
       "sButtonText": "Delete", 
       "sAjaxUrl": "delete_title" 
      }, 
     ] 
    }, 
    "aoColumnDefs": [ 
     { "bSortable": false, "aTargets": [ 0 ] }, 
     { "sWidth": "20px", "aTargets": [ 0 ] }, 
     { "sWidth": "40px", "aTargets": [ 1 ] }, 
     { "sClass": "alignCenter", "aTargets": [ 1 ] } 
    ] 
}); 

<?php    
     $tmpl = array ('table_open' => '<table class="table" id="titles-table">'); 
     $data = array('name' => 'titles', 'class' => 'selectall'); 
     $this->table->set_heading(form_checkbox($data), 'ID', 'Title Name', 'Style', 'Status');    
     $this->table->set_template($tmpl);    
     foreach ($titles as $row) 
     { 
      $checkbox_data = array(
       'name'  => 'titles', 
       'id'   => $row->id 
      ); 
      $this->table->add_row(form_checkbox($checkbox_data), $row->id, $row->title_name, $row->type_name, $row->status_name); 
     } 
     echo $this->table->generate(); 
     ?> 

是否anyoen别人看到我“米失踪？

Answer 1

Alternaitve路由只是简单地使用jquery/javascript来做你的出价..这是我做的一个非常相似的例子，它不是你的原因的直接答案..但如果改变以匹配你的id的类等。可以做很多可以帮助你在你的事业

 $("#hideme").click(function(e) 
     { 
      e.preventDefault(); 
      var postArray = new Array(); 
      i=0; 
      $("input:checked").each(function() 
      { 
       var theID = $(this).attr("name"); 
       theID = theID.replace("offerterms-", ""); 
       postArray.push(theID); 
       $(this).parents("tr").animate(
        {"color":"#FFF", "background-color":"#FFF"}, 
        "5000", 
        function() 
        { 
         $("input:checked").parents("tr").remove(); 
         $("table.datatable TR").removeClass("darkrow"); 
         $("table.datatable TR:odd").addClass("darkrow"); 
        }); 
      }); 
      $.post("./hide/", {"entry":postArray}, function(data) 
      { 
       if((".datatable tr").length == 1){$(".datatable").hide();$("#hideme").hide();$("#recordCount").text("0");} 
       else{$("#recordCount").text((parseInt($("#recordCount").text())-1));} 
       //alert(data.msg); 
      }, "json"); 
     }); 

这是什么一样，基本上在桌子上迭代，并构建选中的复选框的数组张贴到我的后端在此期间我使用数组处理我的数据库条目和在我的情况下预制形式隐藏的数据，所以它隐藏在另一个类似的表上使用，哪些管理员可以查看这些并稍后取消隐藏它们。无论如何，当迭代在表上，然后隐藏在每行的基础上所有t他用复选框行检查。

Answer 2

检查例子为Server Side Processing。

您需要的sAjaxSource添加到您的DataTable的初始化，并在那里定义删除。还您可能需要额外的推服务器PARAMS到服务器端，您可以使用这样的事情：如果你需要更多的帮助或更多的细节强制

//Example from one of my projects: 
//This adds extra data to the ajax request sent by datatables. 
"fnServerParams": function (aoData) { 
     aoData.push({ "name": "bu", "value": BU }); 
     aoData.push({ "name": "SLAName", "value": SLANAME }); 
     aoData.push({ "name": "substep", "value": STEP }); 
     aoData.push({ "name": "timeperiod", "value": TIME }); 
     var UserFilter = $("#userFilter").val(); 
     aoData.push({ "name": "user", "value": UserFilter }); 
    } 

不问！

// EDIT 1

$('#table').dataTable({ 
"sDom": '<"top"lTf<"clear">>rt<"actions"<"actions-left"i><"actions-right"p>>', 
"bAutoWidth": false, 
"sPaginationType" : "full_numbers", 
"sAjaxSource" : "/path/to/function", 
"fnServerParams": function (aoData) { 
    aoData.Push(ArrayWithCheckboxInfo); 
}, 
"oTableTools": { 
"aButtons": [ 
     { 
      "sExtends": "text", 
      "sButtonText": "Add" 
     }, 
     { 
      "sExtends": "text", 
      "sButtonText": "Edit" 
     }, 
     { 
      "sExtends": "text", 
      "sButtonText": "Delete", 
      "sAjaxUrl": "delete_title" 
     }, 
    ] 
}, 
"aoColumnDefs": [ 
    { "bSortable": false, "aTargets": [ 0 ] }, 
    { "sWidth": "20px", "aTargets": [ 0 ] }, 
    { "sWidth": "40px", "aTargets": [ 1 ] }, 
    { "sClass": "alignCenter", "aTargets": [ 1 ] } 
] 

}）;

然后在服务器端处理基于数组中信息的复选框。我不知道是否要从数据表或数据库中删除行，但可以同时执行这两行，然后它会将更新的数据发送到客户端。