Ajax+Bootstraptable+checkbox

{% extends 'base.html' %}
{% load static %}
{% block contents %}
    <style>
        .table-demo {
            width: 100%;
            margin: 0px auto 0px auto;
        }
    </style>
    <link href="{% static 'bootstrap-3.4.1/css/bootstrap-table-1.15.3.css' %}" rel="stylesheet"/>
    <script src="{% static 'bootstrap-3.4.1/js/bootstrap-table-1.15.3.js' %}"></script>
    <div id="toolbar">
    	<label>请选择产线 :&nbsp</label>
    	<select class="form-control" id="line_info">
        	<option value="abc">abc</option>
        	<option value="abce">abce</option>
        	<option value="acef">acef</option>
   		</select>&nbsp&nbsp
    <label>开始日期 :&nbsp</label>
    <input type="month" name="start_date" id="start_date" value="" min="2019-01">
    <label>&nbsp结束日期 :&nbsp</label>
    <input type="month" name="end_date" id="end_date" value="" min="2019-01" max=" ">
    <button οnclick="loadData()"></button>
    <button οnclick="getSels()"></button>
               <div class="table-demo">
                    <table id="table"></table>
                </div>
                <script>
                    //设置需要显示的列
                    var columns = [
                        {
                            field: "checked", //开启复选框
                            title: '编号',
                            checkbox: true
                        },
                        {
                            field: 'id',
                            title: '序号'
                        },
                        {
                            field: 'line',
                            title: '产线'
                        },
                        {
                            field: 'station',
                            title: '工位'
                        },
                        {
                            field: 'maintain_content',
                            title: '维护内容'
                        },
                        {
                            field: 'complete_time',
                            title: '完成时间'
                        },
                        {
                            field: 'operator',
                            title: '操作人'
                        },
                        {
                            field: 'maintain_type',
                            title: '维护类型'
                        },
                        {
                            field: 'date_time',
                            title: '时间'
                        }];

                    var data = [{}];

                    //bootstrap table初始化数据
                    $('#table').bootstrapTable({
                        toolbar: "#toolbar",
                        data: data,
                        dataType: "json",
                        //height: 700,
                        search: "true",
                        showColumns: true,
                        pagination: true, // 是否分页
                        pageNumber: 1,
                        pageSize: 10,
                        pageList: "[10,20,50]",
                        paginationHAlign: "left",
                        paginationDetailHAlign: "right",
                        sortable: true, // 是否启用排序
                        columns: columns,
                        maintainSelected: true,
                    });

                    function loadData() {
                        $.ajax({
                            type: "GET",
                            url: '{% url 'fixed_forecast' %}',
                            dataType: 'json',
                            data: {
                                "line": document.getElementById("line_info").value,
                                "start_date": document.getElementById("start_date").value,
                                "end_date": document.getElementById("end_date").value
                            },
                            success: function (data) {
                                var newData = data;
                                console.log(newData)
                                $('#table').bootstrapTable('load', newData);
                            },
                        })
                    }


                    function getSels() {
                        var listTable = [];
                        var rowsVal = $('#table').bootstrapTable('getAllSelections'); //获取复选框选择行数据
                        console.log(rowsVal)
                        for (var key in rowsVal) {
                            console.log(key, rowsVal[key], rowsVal[key]["id"])
                            listTable.push(rowsVal[key]["id"]) //获取复选框第一列行数据
                        }
                        var sendListTable = listTable.join(',')
                        //console.log(sendListTable)
                        $.ajax({
                            type: "POST",
                            url: '{% url 'fixed_forecast' %}',
                            dataType: 'json',
                            data: {
                                "line": document.getElementById("line_info").value,
                                "start_date": document.getElementById("start_date").value,
                                "end_date": document.getElementById("end_date").value,
                                "ids": sendListTable
                            },
                            success: function (data) {
                                var newData = data;
                                console.log(newData)
                                $('#table').bootstrapTable('load', newData);
                            },
                        })
                    }
                </script>
            </div>
        </div>
    </main>
{% endblock %}