0

我正在尝试向我的表中添加一些功能，允许用户选择一行或多行，以便在用户单击删除按钮后，它将向服务器发送 Ajax 请求，从该服务器中删除表中的项目。我一直在查看数据表网站，该网站是我添加到页面的脚本，其中有很多内容，我不确定我到底需要什么来完成这个。

$( '#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(); 
        ?>

有没有其他人看到我错过了什么？

4

2 回答 2

1

检查服务器端处理的示例。

您需要将 sAjaxSource 添加到 DataTable Initialization 中，并在其中定义删除。此外，您可能需要将额外的服务器参数推送到服务器端。你可以使用这样的东西：

//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 });
    }

如果您需要更多帮助或更多详细信息，请询问！

//编辑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 ] }
]

});

然后在服务器端根据来自阵列的信息处理复选框。我不知道您是否要从数据表或数据库中删除该行，但您可以同时执行这两项操作，然后它将更新的数据发送到客户端。

于 2012-07-17T14:00:29.227 回答
1

替代路线是直接使用 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");
        });

这是做什么的，本质上是遍历表并构建一个选中复选框的数组以发布到我的后端，此时我使用该数组来处理我的数据库条目并在我的情况下预先形成数据的隐藏以便隐藏以供使用在另一个类似的表格上，管理员可以查看这些表格并稍后取消隐藏它们。无论如何，在遍历表格时，它会在每行的基础上隐藏所有带有选中复选框的行。

于 2012-07-18T19:03:54.177 回答