jquery datatables添加带有ajax服务器端响应的复选框

Posted 2023-05-07

【中文标题】jquery datatables添加带有ajax服务器端响应的复选框

【英文标题】：jquery datatables add checkbox with ajax server side response

【发布时间】：2011-03-05 08:47:19

【问题描述】：

我正在使用 C# ASP .NET MVC 和 ajax 调用。我能够获得表格的显示以及所有功能。

但是，我不明白如何添加复选框和按钮。我也尝试过 dom-checkbox 但无法正常工作。

感谢任何帮助。

我的代码如下所示：

$(document).ready(function () 

$('#personTable').dataTable(
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "/Home/GetCustomData",
            "aoColumns": [
                          "sSortDataType": "dom-checkbox", "sTitle": "Select", 
                                     sName": "" ,
                          "sName": "ID", "sTitle": "ID" ,
              "sName": "FirstName", "sTitle": "First Name" ,
              "sName": "Email", "sTitle": "Email"]
        );
    );

我的 html 是： [table border="1" id="personTable" class="display"] [/table]

【参考方案1】：

如果您不希望按照Lukasz Dziedzia's answer 中的说明在 json 响应中返回 html，您可以在客户端覆盖 fnRowCallback 函数，以便在显示之前将复选框插入行中。

【参考方案2】：

您只需在响应中返回复选框 html 代码。 在您的 json 响应中添加如下内容：

...
"aaData":[
[
...
    "<input type=\"checkbox\" />",
...
]

（您也可以使用 html 作为此列的类型，但可能会为带有复选框的列禁用排序和其他类似功能，因此这根本没有影响。）

【参考方案3】：

ColumnDefs:[
             'targets': [0],
              'render': function (data, type, full, meta)
                        
                          return '<input type="checkbox" name="id[]" value="' + 
                          $('<div/>').text(data).html() + '">';
                        
             
           ]