Question

只有我的数据表中的第一行才会收到我的变量。

var是从html下拉列表中给出的值。如果单击第一行上的打印按钮，var将传递给url。如果更改选择选项，则会更新var。

如果单击任何其他行，var将显示为undefined。

                    <script type="text/javascript">
                    function datatableHandler ( sel)
                    {
                        $('#workorder').DataTable().destroy();

                        var table = $('#workorder').DataTable({
                            //display columns
                            "columns": [
                                //display action buttons
                                {"mData": "idWorkOrder",
                                    "mRender": function (data,  type,  row) {
                                        return  '<a href="print.php?idWorkOrder='+row.idWorkOrder+'&pages='+sel+'" 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'
                            }
                        });
                        table.draw( false );
                    }
                    $(document).ready(function () {
                        $('#multipleSelect').on('change', function() {
                            sel = $(this).val();
                            console.log(sel);

                            datatableHandler (sel);
                        });
                        $('#workorder').DataTable().destroy();

                        var table = $('#workorder').DataTable({
                            //display columns
                            "columns": [
                                //display action buttons
                                {"mData": "idWorkOrder",
                                    "mRender": function (data,  type,  row) {
                                    sel=1;
                                        return  '<a href="print.php?idWorkOrder='+row.idWorkOrder+'&pages='+sel+'" 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'
                            }
                        });
                        table.draw( false );

                    });
                </script>

Answer 1

您需要在更改事件上调用数据表函数，以便数据表将获得sel的更新值。

我刚刚在multi select的change事件上调用了datatableHandler函数，并将值sel传递给该函数。

     <script type="text/javascript">


            function datatableHandler (var sel) {
// destroy the datatable

 $('#workorder').DataTable().destroy();

          var table = $('#workorder').DataTable({
                            //display columns
                            "columns": [
                                //display action buttons
                                {"mData": "idWorkOrder",
                                    "mRender": function (data,  type,  row) {
                                    return  '<a href="print.php?idWorkOrder='+row.idWorkOrder+'&pages='+sel+'" 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'
                                }
                        });
                        table.draw( false );
                    };     

             $(document).ready(function () {
                            var sel;
                            $('#multipleSelect').on('change', function() {
                               sel = $(this).val();
                                console.log(sel);

                               //call datatable handler function with value sel
                                 datatableHandler(sel);
                            });
                  });
    </script>

仅数据表第一行接收jquery var

1 个答案: