Question

我目前在我的页面上有以下脚本：

HTML + JS代码：

<!DOCTYPE html>
<html>

<body>
<select>
  <option value="data_20160712">data_20160712</option>
  <option value="data_20160711">data_20160711</option>
</select>     
</br></br></br></br>  
    <table id="data0" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>F1</th>
                <th>F2</th>
                <th>F3</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>F1</th>
                <th>F2</th>
                <th>F3</th>
            </tr>
        </tfoot>
    </table>
</body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/scroller/1.4.2/js/dataTables.scroller.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js "></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.12/dataRender/datetime.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // Setup - add a text input to each footer cell
        $('#data0 tfoot th').each(function(i) {
            var title0 = $('#data0 thead th').eq($(this).index()).text();
            $(this).html('<input type="text" placeholder="Search ' + title0 + '" data-index="' + i + '" />');
        });

        // DataTable
        var table = $('#data0').DataTable({
            "pageLength": 10,
            "lengthChange": true,
            responsive: true,
            //fixedHeader: false,
            "scrollX": true,
            "ajax": "data_20160712.json",
            deferRender: true,
            dom: 'Blfrtip',
            buttons: [{
                    extend: 'excelHtml5',
                    title: "data_20160712"
                }, {
                    extend: 'csvHtml5',
                    title: "data_20160712"
                }, {
                    extend: 'colvis',
                    title: "data_20160712"
                }, ]
                //FIX HEADER SIZE
        });
        // Apply the search
        table.columns().every(function() {
            var that = this;

            $('input', this.footer()).on('keyup change', function() {
                if (that.search() !== this.value) {
                    that
                        .search(this.value)
                        .draw();
                }
            });
        });
    });
</script>

</html>

data_20160712.json：

{"data": [
    ["20160712","20160712","20160712"],
    ["20160712","20160712","20160712"],
    ["20160712","20160712","20160712"]
]
}

data_20160711.json：

{"data": [
    ["20160711","20160711","20160711"],
    ["20160711","20160711","20160711"],
    ["20160711","20160711","20160711"]
]
}

如何使用页面上的其他功能和选择框动态控制 YYYYMMDD 值，以便数据源中的数据在数据源发生变化时动态更新？

感谢您的帮助。

JSFIDDLE

Answer 1

我不能100％确定您的问题是什么，但我怀疑它涉及.ajax.reload()数据表方法。

然后，您可以对数据执行任何操作，并调用上述函数来刷新数据。

Answer 2

好的我管了！

class LocalizedTextField: UITextField {

    override func drawPlaceholderInRect(rect: CGRect) {

        let localizedPlaceHolder = self.placeholder!.localized
        self.placeholder = localizedPlaceHolder
        super.drawPlaceholderInRect(rect)
    }
}
class LocalizedLabel : UILabel {
    override func awakeFromNib() {
        if let text = text {
            self.text = text.localized
            self.bounds.size.width = CGFloat.max
            self.sizeToFit()
        }
    }
}

class LocalizedButton : UIButton {
    override func awakeFromNib() {
        for state in [UIControlState.Normal, UIControlState.Highlighted, UIControlState.Selected, UIControlState.Disabled, UIControlState.Focused] {
            if let title = titleForState(state) {
                setTitle(title.localized, forState: state)
            }
        }
    }
}

extension String {

    var localized: String {
        let localizedValue =  NSLocalizedString(self, tableName: nil, bundle: NSBundle.mainBundle(), value: "", comment: "")
        if localizedValue == "" {

            return self
        }
        else
        {
            return localizedValue
        }
        return self

    }
}

我添加了一个脚本，当所选值发生变化时，我会以我需要的方式替换数据源：

<select id='sel' onchange="getSelValue()">
  <option value="data_20160712">data_20160712</option>
  <option value="data_20160711">data_20160711</option>
</select>

＆＃13;

<script>
function getSelValue() {
    //console.log($( "#sel option:selected" ).text());
    $('#data0').DataTable().ajax.url('json/'+$( "#sel option:selected" ).text()+'.json').load();
}
</script>

＆＃13;

JQuery - 更改我的数据表的ajax数据源

2 个答案: