1. 程式人生 > >點選改變文字框選擇內容,Jquery datatables 重新載入資料

點選改變文字框選擇內容,Jquery datatables 重新載入資料

選擇文字框中的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>