DataTable添加checkbox实现表格数据全选，单选（点选）

我使用的是Yii2 框架, 第一次发文章,
因此在此我整理了一些我遇到的问题. 希望能帮助到一些人.

1. 全选问题, 不在第一页全选可能会导致跳到第一页.
2. 全选后切换页面,表头的复选框一直在勾选状态.

代码如下

html 页面

<div id="newTab" class="box-body">
 	<table id="example1" class="table-bordered" style="width: 100% !important;">
    </table>
 </div>

js部分

 <script type="text/javascript">
 $("#example1").dataTable({  //id为table id
            language: datatables_zh_CN, //语言设置
            "bStateSave":true,
            // 'ordering': false, 排序设置 默认开启.
            "filter": false,         //搜索框
       		"info": false,           //底部文字
        	"serverSide": false,      //后台处理分页则为true   
        	"paging": true,                     //分页
        	"lengthChange": false,   //选择每页显示多少条数据，下拉选项
	        /**		分页样式
	        *		numbers - 只有只有数字按钮
			*		simple - 只有上一页、下一页两个按钮
			*		simple_numbers - 除了上一页、下一页两个按钮还有页数按钮，Datatables默认是这个
			*		full - 有四个按钮首页、上一页、下一页、末页
			*		full_numbers - 除首页、上一页、下一页、末页四个按钮还有页数按钮
			*		first_last_numbers - 除首页、末页两个按钮还有页数按钮
	        */ 
	        "paginationType": "full_numbers",      //详细分页组，可以支持直接跳转到某页
	        "lengthMenu": [10, 20],    //选择每页显示多少条数据 数组形式
            ajax: {
                url : '?r=common/xxx',  //数据请求路径
                dataSrc: 'itemInfo',
                data: function ( d ) { 
                    return $.extend( {}, d, {
                    //传参 页面如果有选择框可商场参数
                        groupId: $("#hostGroup").val(),
                        hostId: $("#hosts").val(),
                        appId: $("#application").val(),
                        regionId: $("#regionId").val()
                    });
                }
            },
            "columns": [{
                data: null,  //表头第一列, checkbox复选框 
                title: "<input type='checkbox' id='checkall' value=''/>",
                "width":"35px",
                'orderable': false  //排序要关掉 否则在其他分页点击全选会跳到分页1.
            },
                {
                    "title": "名称", "data": "name","width":"200px", render: function (data, type, row, meta) {
                            return "<a href='?r=IPCnet/monitor-item/edit-display&menuid=34&itemid=" + row.id + "'>" + data + "</a>";
                    }
                },
                {"title": "状态", "data": "status","width":"95px"},
            ],
            columnDefs: [{
                targets: 0,
                render: function (data, type, row, meta) {
                //每一行第一列都是复选框, 复选框要有name属性 方便查找
                //并且要加一个onclick 事件, 保证单选的时候也检查表头复选框状态.
                    return '<input type="checkbox" name="checklist" οnclick="checkCheck()" value="' + row.id + '" />'
                }
            }],
            "searching": false,
            "sInfoEmpty": "暂无数据",
            "drawCallback": function( settings ) {
                //此为画完表格的回调函数, 可判断一些画完表格之后的判断状态.
            },
            "fnDrawCallback": function () {
            	//判断翻页时表头复选框的状态

				//去表格中tr的总数 表头和所有行的数量
            	var trs = document.getElementById("example1").getElementsByTagName("tr");
                var ifChe = 0;
                $("input[name='checklist']").each(function () { 
                //取所有name 为checklist的input并计数选取的
                    if (this.checked) {
                        ifChe++;
                    }
                });
                //比较计数 总数减去表头 和计数的是否一致 如果一直表头复选框保持选中, 否则不选中
                if (ifChe == (trs.length - 1)) {
                    $("#checkall").prop("checked", true);
                } else {
                    $("#checkall").prop("checked", false);
                }
            },
            "initComplete": function( settings, json ) {
            //表格完成时的回调函数
            	//全选逻辑放在此处
                $("#checkall").click(function () {
                    if (this.checked) {
                        $(this).attr('checked', 'checked');
                        $("input[name='checklist']").each(function () {
                            this.checked = true;
                        });
                    } else {
                        $(this).attr('checked', 'checked');
                        $("input[name='checklist']").each(function () {
                            this.checked = false;
                        });
                    }
                });
            }
        });
    });

    /**
     * 检验表头是否check
     * 点击每一行的时候
     */
    function checkCheck() {
        if ($(this).is(":checked") == false) {
            $('#checkall').prop("checked", false);
        }
    }
</script>

commonController.php 数据返回, 可根据个人需求自行调整

 public function actionxxx(){
        try {
            $request = \Yii::$app->request;

            $groupId = $request->get("groupId") == 0 ? null : $request->get("groupId");
            $hostId = $request->get("hostId")==0? null:$request->get("hostId") ;
            $appId = $request->get("appId")==0? null:$request->get("appId");
            
            $regionId = $request->get('regionId', $this->node_id);
            $regionId = empty($regionId) ? $this->node_id : $regionId;

            $itemInfo= \Yii::$app->db->createCommand("你的sql")->queryAll();

            $itemInfo = array_values($itemInfo);
            $response = \Yii::$app->response;
            $response->format = \yii\web\Response::FORMAT_JSON;
            $response->data = ['itemInfo' => $itemInfo];


        } catch (Exception $e) {
            echo $e->getMessage();
        }
    }

希望能帮助到大家, 有问题可以留言,如果看到我会回复的