在按钮单击javascript上发布Datatable复选框的多个复选框数据答案

【问题标题】：Post multiple checkbox data of Datatable checkbox on button click on javascript在按钮单击javascript上发布Datatable复选框的多个复选框数据
【发布时间】：2020-11-09 15:41:00
【问题描述】：

这是创建数据表的数据表脚本。复选框目标为 0，因此每行的第一列始终是一个复选框。该复选框继承了通过 django 视图发送的 {{id}}。

我想以某种方式通过 URL 将这些 ID 发送回视图，这样我就可以看到我在数据表中选择的学生 ID。

如果有人知道如何用 Javascript 完成这项工作，那就太好了。单击按钮时，ID 当前已打印-> console.log(PostData)。非常感谢您的帮助！:)

table_html：

<div  width="100%">
    <form action="" method = "post">
        {% csrf_token %}
    <table id="table_id2" width="100%" class="display">
        <thead>
            <tr>
                <th>Add</th>
                <th>title</th>
                <th>name</th>
                <th>surname</th>
                <th>email</th>
                <th>location</th>
                <th>address</th>
            </tr>
        </thead>
    
    
        <tbody>
            {% for student in students %}
            <tr>
                <th>{{ student.ID}}</th>
                <th>{{ student.title }}</th>
                <th>{{ student.name }}</th>
                <th>{{ student.surname }}</th>
                <th>{{ student.email }}</th>
                <th>{{ student.location }}</th>
                <th>{{ student.address }}</th>
            </tr>
            {% endfor %}

        </tbody>
</form>

Javascript：

{% block js %}
        <script type="text/javascript" src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>
     <script>
         var PostData;
        $(document).ready( function () {
        var table = $('#table_id2').DataTable({
        "ajax": "{% url 'table_list_addStudents' %}",
        "columnDefs": [ {
            'targets': 0,
            'checkboxes': {
            'selectRow': true
        }
            } ],
            select: {
                style:    'multi',
            },
            order: [[ 1, 'asc' ]],
 
            
        });
        var buttons = new $.fn.dataTable.Buttons(table, {
            buttons: [
            {
                    text: 'Add Students',
                    action: function () {
        
                var data = table.rows( { selected: true } ).data().pluck(0).toArray();
               
                if(data.length > 0){
                    PostData = data
                    console.log(PostData)
                 }  
         }
            },
        ]
        }).container().appendTo('#buttons')

        
        });
        
        
        
    </script>
    {% endblock %}

【问题讨论】：

如果有人知道如何在没有 javascript 的情况下以某种方式获取在复选框中选中的 id 的不同方法也很好，请告诉我

标签： javascript jquery django datatable datatables

【解决方案1】：

Ajax 和 Django 组合需要一个 done.function() 来判断是否成功。这只是一个运行良好的测试代码。正如您在views.py中看到的那样，数据总是成功的

            var buttons = new $.fn.dataTable.Buttons(table, {
            buttons: [
            {
                    text: 'Add Students',
                    action: function () {
        
                var data = table.rows( { selected: true } ).data().pluck(0).toArray();
               
                if(data.length > 0){
                    
                    data = JSON.stringify(data)
                    $.ajax({
                    type: 'POST',
                    url: "",
                    data: {

                        'Data' : data,
                        csrfmiddlewaretoken : '{{ csrf_token }}'
                    },
                    dataType: 'json',
                    }).done(function(data){
                        if (data.success){
                            window.location.href = "{% url 'Kurs-page' %}";
                        }
                    });
                 }  
         }
            },
        ]
        }).container().appendTo('#buttons')


if request.is_ajax():
#doStuff
return JsonResponse({
            'success':True
    }) #this is going to be returned to ".done " function in js.

它对我有用。如果有人想改进它，那会很酷。就我而言，我解决了这个问题，只是想发布它，以便其他人可以看到如何在 django 中处理它。

【讨论】：