Datatables - fnGetNodes() how to push the results

2020-07-26 09:09发布

I've been struggling with with datatables and what to do with fnGetNodes to correctly push the data back into the form on submit.

I've got the jquery working correctly. I can see the selected values as described in the documentation. My question is how do I take that sData and shove that back to the server in the POST??

I know it must be simple but I am clearly too focused on the tree to see the forest.. I'd appreciate any help on this!!

<script style="text/javascript">

    $(document).ready(function() {
        $('#form').submit( function() {
            var sData = $('input', oTable.fnGetNodes()).serialize();
            alert( "The following data would have been submitted to the server: \n\n"+sData );
            return false;
        });

        oTable = $('#data_table').dataTable();
    });
</script>

My HTML form looks like this (Shortened for clarity)

<table id="data_table">
            <thead>
                <tr>
                    <th>Select</th>
                    <th>Question</th>
                </tr>
            </thead>
            <tr id=0><td><label for="id_questions_0"><input type="checkbox" name="questions" value="103" id="id_questions_0" /></label></td><td>D1. Example of a multiple choice question</td></tr>
<tr id=1><td><label for="id_questions_1"><input type="checkbox" name="questions" value="104" id="id_questions_1" /></label></td><td>E1. Example of a multiple choice question</td></tr>
<tr id=2><td><label for="id_questions_2"><input type="checkbox" name="questions" value="105" id="id_questions_2" /></label></td><td>G. Example of a multiple choice question</td></tr>
<tr id=3><td><label for="id_questions_3"><input type="checkbox" name="questions" value="106" id="id_questions_3" /></label></td><td>H. Example of a multiple choice question</td></tr>

Edit

The alert is showing me this. questions=103&questions=104&questions=105&questions=106&questions=100&questions=101&questions=102

And the POST (Using the developer tools( is showing me this.

csrfmiddlewaretoken:a2c3ed6e1bfee9fce0b7412553aa2080
name:Phase-1 Pre-Drywall
priority:1
description:Pre-Drywall inspection items
use_for_confirmed_rating:on
use_for_sampling:on
data_table_length:10
questions:103
questions:104
questions:105
questions:106
submit:Submit

So somehow I need to transform the former into the later using jquery Can someone help me with this.

Thanks

1条回答
劫难
2楼-- · 2020-07-26 09:30

The answer turned out (as expected) to be very simple.

        var oTable = $('#data_table').dataTable();
        // This will collect all of the nodes which were checked and make sure they get
        // pushed back.
        $('#form').submit(function () {
            $("input[name='question']").remove();  //Remove the old values
            $("input:checked", oTable.fnGetNodes()).each(function(){
                $('<input type="checkbox" name="questions" ' + 'value="' +
                  $(this).val() + '" type="hidden" checked="checked" />')
                    .css("display", "none")
                    .appendTo('#form');
            });
        });
查看更多
登录 后发表回答