Question

我有一个onchange函数，它从html选择中获取值。价值传递得很好。但是，当我尝试将值传递给我的数据表时，它不起作用。

我需要＆＃34; mRender＆＃34;：函数（数据，类型，行）中的pages变量，以根据选择下拉列表获得当前值。

  <select multiple class="selectpicker" data-width="80px" data-style="btn-info"  data-actions-box="true" id="multipleSelect" name="multipleSelect" >
        <option disabled selected> Pages </option>
        <option value="1" selected>Haight Cover Sheet</option>
        <option value="2" selected>Set Cover Sheet</option>
        <option value="3" selected>Roofing Work Order</option>
        <option value="4" selected>Roofing Subcontractor Pay Request</option>
        <option value="5" selected>Job Site Hazard Assessment Roofing</option>
        <option value="6" selected>Job Site Checklist Roofing</option>
        <option value="7" selected>Subcontractor Checklist Roofing</option>
        <option value="8">Siding Work Order</option>
        <option value="9">Siding Subcontractor Pay Request</option>
        <option value="10">Job Site Hazard Assessment Siding</option>
        <option value="11">Job Site Checklist Siding</option>
        <option value="12">Subcontractor Checklist Siding</option>
        <option value="13">Gutters Work Order</option>
        <option value="14">Gutter Subcontractor Pay Request</option>
        <option value="15" selected>Magnet Sheets</option>
    </select>
    <table width="100%" class="table table-striped table-bordered table-hover" id="workorder">
        <thead>
        <tr>
            <th>Actions</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Roof Contract</th>
            <th>Siding Contract</th>
            <th>Gutter Contract</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        var pages ={};
        $('select').on('change', function() {
            pages =  $('#multipleSelect').val();
        });
        $('#workorder').DataTable({
            //display columns
            "columns": [
                //display action buttons
                {"mData": "idWorkOrder",
                    "mRender": function (data,  type,  row) {
                        return '<a href="'+pages+'" data-toggle="tooltip" title="PRINT" target="_blank"><button class="btn btn-info btn-sm"><span class="glyphicon glyphicon-print" aria-hidden="true"></span></button></a>'+
                            '<a href=update.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="EDIT"><button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button></a>'+
                            '<a href=delete.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="DELETE"><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></a>';
                    }
                },
                {"data": "cFirstName"},
                {"data": "cLastName"},
                {"data": "wRoofContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )},
                {"data": "wSidingContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )},
                {"data": "wGutterContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )}
            ],
            "processing": true,
            "serverSide": true,
            "responsive": true,
            "ajax": {
                url: 'datatables.php',
                type: 'POST'
            }
        });
    });
</script>

Answer 1

我能够通过将值保存到隐藏输入来解决问题。

              <select multiple class="selectpicker" data-width="80px" data-style="btn-info"  data-actions-box="true" id="multipleSelect" name="multipleSelect" >
                    <option disabled selected> Pages </option>
                    <option value="1" selected>Haight Cover Sheet</option>
                    <option value="2" selected>Set Cover Sheet</option>
                    <option value="3" selected>Roofing Work Order</option>
                    <option value="4" selected>Roofing Subcontractor Pay Request</option>
                    <option value="5" selected>Job Site Hazard Assessment Roofing</option>
                    <option value="6" selected>Job Site Checklist Roofing</option>
                    <option value="7" selected>Subcontractor Checklist Roofing</option>
                    <option value="8">Siding Work Order</option>
                    <option value="9">Siding Subcontractor Pay Request</option>
                    <option value="10">Job Site Hazard Assessment Siding</option>
                    <option value="11">Job Site Checklist Siding</option>
                    <option value="12">Subcontractor Checklist Siding</option>
                    <option value="13">Gutters Work Order</option>
                    <option value="14">Gutter Subcontractor Pay Request</option>
                    <option value="15" selected>Magnet Sheets</option>
                </select>
                <table width="100%" class="table table-striped table-bordered table-hover" id="workorder">
                    <thead>
                    <tr>
                        <th>Actions</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Roof Contract</th>
                        <th>Siding Contract</th>
                        <th>Gutter Contract</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>

            <script type="text/javascript">
                $(document).ready(function () {
                    var pages =[];
                    $('select').on('change', function() {
                        pages =  $('#multipleSelect').val();
                        $("#pages").val($('#multipleSelect').val());
                    });
                    $('#workorder').DataTable({
                        //display columns
                        "columns": [
                            //display action buttons
                            {"mData": "idWorkOrder",
                                "mRender": function (data,  type,  row) {
                                    return '<form action="print.php" method="post"><input hidden name="idWorkOrder" value="'+row.idWorkOrder+'"><input hidden name="pages[]" id="pages" value="'+pages+'"> <a href="'+pages+'" data-toggle="tooltip" title="PRINT" target="_blank"><button class="btn btn-info btn-sm"><span class="glyphicon glyphicon-print" aria-hidden="true"></span></button></a></form>'+
                                        '<a href=update.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="EDIT"><button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button></a>'+
                                        '<a href=delete.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="DELETE"><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></a>';
                                }
                            },
                            {"data": "cFirstName"},
                            {"data": "cLastName"},
                            {"data": "wRoofContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )},
                            {"data": "wSidingContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )},
                            {"data": "wGutterContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )}
                        ],
                        "processing": true,
                        "serverSide": true,
                        "responsive": true,
                        "ajax": {
                            url: 'datatables.php',
                            type: 'POST'
                        }
                    });
                });
            </script>

将Jquery变量传递给Datatable

1 个答案: