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

Posted 2023-05-09

【中文标题】在按钮单击javascript上发布Datatable复选框的多个复选框数据

【英文标题】：Post multiple checkbox data of Datatable checkbox on button click on javascript

【发布时间】：2020-11-09 15:41:00

【问题描述】：

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

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

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

table_html：

<div  >
    <form action="" method = "post">
        % csrf_token %
    <table id="table_id2"  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 的不同方法也很好，请告诉我

【参考方案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 中处理它。