数据表ajax处理中的复选框

时间:2016-08-30 09:36:42

标签: php jquery

我有一个带有ajax处理的数据表。我在每行都有一个复选框用于多次删除。顶部还有一个复选框,可以立即检查所有复选框。 我需要知道已检查的行并取消选中以删除。

例如,如果我选择我的顶部复选框,它会自动将所有复选框更改为使用此代码检查

 $('#select-all').click(function (event) {
        if (this.checked) {
            // Iterate each checkbox
            $(':checkbox').each(function () {
                this.checked = true;
            });
        } else {
            $(':checkbox').each(function () {
                this.checked = false;
            });
        }
    });

但它只影响当前页面我有超过3000页。我该怎么办?

用于服务器端处理的JS

 var dataTable = $('#example2').DataTable({
        processing: true,
        serverSide: true,
        ajax: "?p=online_user_ajax" // json datasource

    });

JSON返回就像这样

$i = 1;
while ($row = mysql_fetch_array($query)) {  // preparing an array
$actions = '<button class="btn btn-small btn-edit" id="edt_user" ></button>';
$checkbox = '<input type="checkbox">';
$nestedData = array();
$nestedData[] = $checkbox;
$nestedData[] = $i;
$nestedData[] = $row["email"];
$nestedData[] = $row["mobile"];
$nestedData[] = $row["first_name"];
$nestedData[] = $row["last_name"];
$nestedData[] = $actions;

$data[] = $nestedData;
$i++;
}
$json_data = array(
"draw" => intval($requestData['draw']), // for every request/draw by clientside , they send a number as a parameter, when they recieve a response/data they first check the draw number, so we are sending same number in draw.
"recordsTotal" => intval($totalData), // total number of records
"recordsFiltered" => intval($totalFiltered), // total number of records after searching, if there is no searching then totalFiltered = totalData
"data" => $data   // total data array
);

echo json_encode($json_data);  // send data as json format

为了更好地理解我正在添加两个图像

点击顶部复选框

后,系统会检查复选框

All checkboxes are checked

在第二页中取消选中复选框

Checkboxes are unchecked

如果您有任何想法可以解决此问题,请提供帮助。

3 个答案:

答案 0 :(得分:1)

我会为#selectAll注册一个听众:

$("#selectAll").change(function(){
    if ($(this).is(":checked")) {
        $(".your-class").prop("checked", true);
    }
});

在页面更改时,触发事件

$(".page-change").click(
     $("#selectAll").trigger("change");
)

答案 1 :(得分:1)

Ok Sanooj,试试这个: 每当用户点击下一个或上一个按钮时,请执行以下操作:

$(".page-btn").click(function(){
       $('#selectAll').attr('checked', false);
})

替代

$(".page-btn").click(function(){
       $('#selectAll').prop('checked', false);
})

假设您的下一个和上一个按钮有一个公共类页面-btn,它将检测您的点击并取消选中顶部复选框,每当加载下一个/上一个页面数据时,该复选框都不会更新。每当加载新页面数据时,您都需要更新该复选框。

答案 2 :(得分:1)

最后,我通过将顶部复选框值发送到服务器端来解决问题。

$checkbox='<input type="checkbox">';
if (!empty($requestData['columns']['checkbox']['search']['value'])) {
    $checkbox='<input type="checkbox" checked>';
} 
$nestedData = array();
$nestedData[] = $checkbox;
$nestedData[] = $i;
$nestedData[] = $row["email"];
$nestedData[] = $row["mobile"];
$nestedData[] = $row["first_name"];
$nestedData[] = $row["last_name"];
$nestedData[] = $actions;

因此,如果选中顶部复选框,则将选中所有其他复选框