Library/DataTables

제어중인 script

원2 2021. 12. 1. 18:18
728x90
반응형
<script>

    $(document).ready(function () {
        var table = $("#testTable").DataTable({

            serverSide: true,
            processing: true,
            //이건 선택할때 페이지 넘겨도 선택 계속 되어있게 만드는것

            ajax: {
                url: '/dataTablesAjax',
                // 아래는 진행 순서. 받아와야 하는게 총 갯수, 페이징,
                dataSrc: function(d) {
                    console.log(d);
                    return d.data;
                },


                // 여기서 데이터를 보낸다.
                data: function (d) {
                    console.log(d);

                    //여기서의 data 는 아래 columns의 "num" 과 같은 것.
                    console.log(d.columns[d.order[0].column].data, d.order[0].dir);
                    d.orderCol0 = d.columns[d.order[0].column].data;
                    d.orderDir0 = d.order[0].dir;


                    // 검색 데이터 (태그form의 아이디 값testTableForm) 식으로 작성
                    d.target = $("form#testTableForm select#target").val(); // TODO: 검색 대상 (select box)
                    d.searchContent = $("#testTable_filter input[type='search']")[0].value;


                }
                // type:"GET"
            },

            columns: [
                {data:"num"},
                {data:"title",
                    // 링크 걸기 지금 해야하는건 boardController 의 쿼리변경 num 이 아니라 title 로 뿌려줘야함.
                    render: function (data, type, row) {
                        if (type == "display") {
                            data = '<a href="/boardView?title=' + data + '">' + data + '</a>';
                        }
                        return data;
                    }},
                {data:"content"},
                {data:"id"},
                {data:"date"},
                {data:"hit"}

            ],
            columnDefs: [
                {
                    className: "text-center", targets: "_all"
                }

            ],

            dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-5'f><'col-sm-12 col-md-1'B>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",

            //여기 안에 <select id=\"target\"><option value=\"num\">num</option><option value=\"title\">title</option></select> 처럼 커스텀을 할 수 있다.
            language: {
                search: "<select class=\'custom-select col-sm-4\' id=\'target\'><option value=\'\'>전체</option><option value=\'num\'>Num</option><option value=\'title\'>Title</option><option value=\'content\'>Content</option><option value=\'id\'>Id</option></select>",
                zeroRecords: "일치하는 데이터가 없어요...",
                info: "현재 _START_ - _END_ / 총 _TOTAL_건",
                lengthMenu: "한 페이지당 _MENU_ 개씩 보기",
                loadingRecodes: "로딩중...",
                processing: "잠시만 기다려주세요...",
                infoEmpty: "0 건",
                infoFiltered: "(총 _MAX_ 건중에서 필터링 됨)",

                paginate: {
                    next: "다음",
                    previous: "이전",

                },

                select: {
                    rows: {
                        _: "[ %d 개의 행 선택됨 ]"
                    }
                }
            },

            select: {
                style: "multi",
                selector: "td:first-child"

            },

            order:[
                [0, "desc"]
            ],

            buttons: [
                {
                    className: "dt-button btn btn-dark",
                    id: "searchButton",
                    text: "검색",
                }
            ],

            initComplete: function () {
                this.api().columns().every( function (e) {
                    if( e == 1 || e == 2) {

                        var column = this;
                        // col_name = dt_columns[Number(this[0].toString())].title
                        var select = $('<select><option value=""></option></select>')
                            .appendTo( $(column.footer()).empty() )
                            .on('change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );
                                column
                                    .search( val ? '^' + val + '$' : '', true, false )
                                    .draw();
                            });

                        column.data().unique().sort().each( function ( d , j ) {
                            select.append('<option value="' + d + '">' + d + '</option>')
                        });

                    }

                });
            }
            //서버사이드에선 페이지 랜더링이 안먹히나봄;;
            // deferRender: true,
            // rowId: "title"

        });


        // 바로바로 검색안되게 만드는거
        $("form#testTableForm #testTable_filter input[type='search']").unbind();
        // 엔터를 누르면 검색이 돌아가게 하는거 (keyCode 13번은 엔터) 테이블을 선언해주고 draw를 넘겨줘야 값을 받아줌 // 근데 여기 값은 왜 안넘어감?
        $("form#testTableForm #testTable_filter input[type='search']").keyup(function(e) {
            if (e.keyCode === 13) {
                $("#testTable").DataTable().search(this.value).draw();
            }
        });

        // 선택자의 구분을 명확하게 하기 위해서 table에 form 태그를 걸어준다. 나중에 꼬이면 답이 없어짐.
        $(".dt-button").click(function (e) {
            $("#testTable").DataTable().search($("form#testTableForm #testTable_filter input[type='search']")[0].value).draw();

        });

    });

</script>
728x90
반응형

'Library > DataTables' 카테고리의 다른 글

autoWidth 옵션  (0) 2022.04.14
상단의 테이블 헤더가 아래 컬럼과 맞지 않을 때  (1) 2022.01.25
DataTablse server side 진심편  (0) 2021.12.20
특정 값 선택하는 방법  (0) 2021.11.26
DataTables 다중 정렬  (0) 2021.11.24
DataTalbes Button 생성  (0) 2021.11.23