點選改變文字框選擇內容,Jquery datatables 重新載入資料
阿新 • • 發佈:2019-01-02
選擇文字框中的project的值DataTable顯示不同的資料
<div class="form-group"> <label for="selProject64" class="col-sm-4 control-label">Project:</label> <div class="col-sm-4" id="divStashProjectBranch"> <select id="selProject" class="form-control" data-toggle="tooltip" data-place="right"> <option id="span_0" value="slect" >select one</option> <option id="span_1" value="1" >1</option> <option id="span_2" value="2" >2</option> <option id="span_3" value="3" >3</option> </select> </div> <span class="help-block" style="color:#FF6666;font-size: 25px" data-i18n="common.required.star"></span> </div>
<div class="row-fluid" id="divRepoInfoList"> <table id="tabInfo" class="table table-striped table-bordered table-hover" width="100%"> <thead> <tr> <th id="th_repo" width="35%" >repo</th> <th id="th_project" width="30%" >project</th> <th id="th_action" width="35%">action</th> </tr> </thead> <tbody style="font-size: 14px"> </tbody> </table> </di
<script type="text/javascript"> var isloaded = false; $(document).ready(function () { $("#tabInfo").DataTable({//初始化時表格無資料 "aLengthMenu": [10, 20], "iDisplayLength": 10, "aoColumnDefs": [{ "bSortable": false, "aTargets": [1, 2] }], }); $("#txtProject").change(function () {//點選事件 $("#tabInfo").dataTable().fnDestroy();//還原初始化了datatable getCharData(); }); }); function getCharData(){ $("#tabInfo").DataTable({ "aLengthMenu": [10, 20], "iDisplayLength": 10, "aoColumnDefs": [{ "bSortable": false, "aTargets": [1, 2] }], ajax: { type: "POST", url: "", data: { 'type':, project: $("#txtProject64").val(), }, error: function () { alertError(""); }, dataSrc: function (json) { json.draw = json.data.draw; json.recordsTotal = json.data.recordsTotal; json.recordsFiltered = json.data.recordsFiltered; return json.data; } }, }) } </script>
v>