<div class="title">家長</div>
<ul class="table-toolbar"style="text-align: left;">
    <li>
        <a class="toolbar-element btn btn-default btn-create"><i class="fa fa-plus-circle" style="margin-right: 8px;"></i>新增</a>
    </li>
    <li>
        <span class="toolbar-element search"><i class="fa fa-search"></i><span>搜尋</span><input id="keyword" type="search" class="form-control input-sm search" placeholder="" aria-controls="myTable"></span>
    </li>
</ul>
<table id="myTable" class="display table datatables" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>編號</th>
            <th>登入名稱</th>
            <th>中文姓名</th>
            <th>英文姓名</th>
            <th>電話號碼</th>
            <th>電郵地址</th>
            <th>創建日期</th>
            <th>更新日期</th>            
            <th>啟用</th>
            <th>詳情</th>
            <!--<th class="control-delete">刪除<input type="checkbox" class="checkbox-delete-all"></th>-->
        </tr>
    </thead>
</table>
<script>
    var table;
    $(document).ready(function () {
        table = $('#myTable').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "api/parent",
            "columns": [
                {"data": "id"},
                {"data": "username", "name": "登入名稱"},
                {"data": "chi_name", "name": "中文姓名"},
                {"data": "eng_name", "name": "英文姓名"},
                {"data": "mobile", "name": "電話號碼"},
                {"data": "email", "name": "電郵地址"},
                {"data": "create_time", "name": "創建日期"},
                {"data": "update_time", "name": "更新日期"},
                {"data": "status", "name": "啟用", "class": "control-enable"},
                {"data": "details", "name": "詳情", "class": "control-details"},
            ],
            "order": [
                [0, "desc"],
                
            ],
            "columnDefs": [
                {
                    "targets": [0],
                    "visible": false,
                    "searchable": false,
                },
                {
                    "targets": [9],
                    "visible": true,
                    "searchable": false,
                    "orderable": false,
                },
                {
                    "targets": [6,7,8],
                    "visible": true,
                    "searchable": false,
                    "orderable": true,
                },
                {
                    "targets": [1, 2, 3, 4, 5],
                    "visible": true,
                    "searchable": true,
                    "orderable": true,
                },
            ],
            language: {
                "processing": "處理中...",
                "loadingRecords": "載入中...",
                "lengthMenu": "顯示數量 _MENU_ ",
                "zeroRecords": "沒有符合的結果",
                "info": "顯示 _START_-_END_（總數：_TOTAL_）",
                "infoEmpty": "0 項結果",
                "infoFiltered": "(從 _MAX_ 項結果中過濾)",
                "infoPostFix": "",
                "search": "搜尋:",
                "paginate": {
                    "first": "<<",
                    "previous": "<",
                    "next": ">",
                    "last": ">>"
                },
                "aria": {
                    "sortAscending": ": 升冪排列",
                    "sortDescending": ": 降冪排列"
                }
            },
            "pagingType": "four_button",
            "drawCallback": function (settings) {
                console.log(settings);
                $('button[id^="details-"]').on('click', function (event) {
                    event.preventDefault();
                    var newForm = $('<form>', {
                        'action': '/parent/edit',
                        'method': 'post',
                    }).append($('<input>', {
                        'name': 'id',
                        'value': this.id.replace('details-', ''),
                        'type': 'hidden'
                    }));
                    $(document.body).append(newForm);
                    newForm.submit();
                });
            },
        });

        $(".btn-create").on('click', function () {
            window.location.replace("/parent/add");
            return false;
        });

        $('#myTable_filter').hide();
        $('#myTable_info').parent('.col-sm-5').css({"float": "right", "text-align": "right"});
        $('.dataTables_length').wrap('<div class="row dataTables_footer"></div>').wrap('<div class="col-sm-7"></div>').after($('#myTable_paginate'));
        $('#myTable').after($('.dataTables_footer'));

    });

    $(document).on('input', '#keyword', function () { //onchange & onblur don't work
        var keyword = $(this).val().trim();
//        console.log('keyword:'+keyword);
        table.columns().search('').columns(1).search(keyword).columns(2).search(keyword).columns(3).search(keyword).columns(4).search(keyword).columns(5).search(keyword).draw();
    });

    $(document).on('click', '.fa-search', function () {
        $('#keyword').trigger('input');
    });

</script>
