tabulator


http://tabulator.info/ 라이브러리 



테이블 안에 테이블 ( row - expand ) ajax 기능을 구현




   html, script


<!DOCTYPE html>
<html lang='ko'>
<head>
    <meta charset="utf-8">
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta http-equiv="refresh" content="43200"><!-- 12hours 43200 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />

    <meta name="description" content="serpiko's HTML5 Template ver 2016.11.02" />
    <meta name="author" content="serpiko@hanmail.net ( http://serpiko.tistory.com )" />
    
    <!--
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    -->
    
    <title>Document</title>

    <!-- css -->
    <!--<link rel="stylesheet" type="text/css" href="/assets/css/style.css" />--> 

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link href="dist/css/tabulator.min.css" rel="stylesheet">
    <link href="font-awesome-4.7.0/css/font-awesome.min.css" rel='stylesheet'>

    <style>
        * {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        #wrap{
            padding:10px;
        }
        .m-t-10{
            margin-top: 10px;
        }
        .m-b-10{
            margin-bottom: 10px;
        }
        .font-red{
            color: #FF0000;
        }
    </style>
</head>

<body>

    <div id="wrap">
        
        <div class='m-t-10 m-b-10'>
            Page: <select class='table-pagenation'>
                <option value='5'>5</option>
                <option value='10'>10</option>
                <option value='20'>20</option>
                <option value='30'>30</option>
            </select>

            <button type='button' id='download-xlsx'>download-xlsx</button>
            <button type='button' id='download-pdf'>download-pdf</button>
                
            Field:
            <select id="filter-field">
                <option></option>
                <option value="name">Name</option>
                <option value="progress">Progress</option>
                <option value="gender">Gender</option>
                <option value="rating">Rating</option>
                <option value="col">Favourite Colour</option>
                <option value="dob">Date Of Birth</option>
                <option value="car">Drives</option>
                <option value="function">Drives &amp;Rating &lt; 3</option>
            </select>

            Type:
            <select id="filter-type">
                <option value="=">=</option>
                <option value="<">&lt;</option>
                <option value="<=">&lt;=</option>
                <option value=">">&gt;</option>
                <option value=">=">&gt;=</option>
                <option value="!=">!=</option>
                <option value="like">like</option>
            </select>

            Value:
            <input id="filter-value" type="text" placeholder="value to filter">

            <button type='button' id='filter-clear'>Clear Filter</button>

            <button type='button' id="refresh">refresh</button>

        </div>

        

        <div id="example-table"></div>


    </div>
    
    <!-- script -->
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script type="text/javascript" src="dist/js/tabulator.min.js"></script>
    <script type="text/javascript" src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>

    <script>
        $(document).ready(function(){
        //////////////////////////////
            
            var _arrPrevTableEl = [];
            var _toggle = false;
            
            //Generate print icon
            var printIcon = function(cell, formatterParams){ //plain text value
                return "<i class='fa fa-lg fa-plus-circle'></i>";
            };

            $("#example-table").tabulator({
                //height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
                height:"100%",
                layout:"fitDataFill",
                movableColumns:true,
                tooltips:true,
                resizableRows:true,
                pagination:"remote",
                ajaxURL:"exampledata.php",
                ajaxConfig:"POST",
                ajaxParams:{func:"first_data"},
                paginationSize:5,
                placeholder:"No Data Set",
                columns:[
                    {formatter:printIcon, field:"detail", width:40, align:"center", resizable:false, headerSort:false, "cellClick":cellClick},
                    {title:"Name", field:"name", sorter:"string", width:200, "cellClick":cellClick},
                    {title:"Progress", field:"progress", sorter:"number", formatter:"progress"},
                    {title:"Gender", field:"gender", sorter:"string"},
                    {title:"Rating", field:"rating", formatter:"star", align:"center", width:100},
                    {title:"Favourite Color", field:"col", sorter:"string", sortable:false},
                    {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
                    {title:"Driver", field:"car", align:"center", formatter:"tickCross", sorter:"boolean", "cellClick":cellClick},
                ],
                rowFormatter:function(row){
                    //create and style holder elements
                    var holderEl = $("<div class='holderEl'></div>");
                    var tableEl = $("<div class='tableEl'></div>");

                   holderEl.css({
                       "display":"none",
                       "box-sizing":"border-box",
                       "padding":"10px 30px 10px 10px",
                       "border-top":"1px solid #333",
                       "border-bottom":"1px solid #333",
                       "background":"#ddd",
                   });

                   holderEl.append(tableEl);
                   row.getElement().append(holderEl);
                },
                rowClick:function(e, row){ //trigger an alert message when the row is clicked
                    //alert("Row " + row.getData().id + " Clicked!!!!");
                },
            });

            $(".table-pagenation").on("change", function(e){
                var value = parseInt( $(e.currentTarget).val(), 10 );
                $("#example-table").tabulator("setPageSize", value);
            });

            //trigger download of data.xlsx file
            $("#download-xlsx").click(function(){
                $("#example-table").tabulator("download", "xlsx", "data.xlsx", {sheetName:"My Data"});
            });

            //trigger download of data.pdf file
            $("#download-pdf").click(function(){
                $("#example-table").tabulator("download", "pdf", "data.pdf", {
                    orientation:"portrait", //set page orientation to portrait
                    title:"Example Report", //add title to report
                });
            });
            
            $("#refresh").click(function(){
                $("#example-table").tabulator("setData");
            });

            //Custom filter example
            function customFilter(data){
                return data.car && data.rating < 3;
            }

            //Trigger setFilter function with correct parameters
            function updateFilter(){

                var filter = $("#filter-field").val() == "function" ? customFilter : $("#filter-field").val();

                if($("#filter-field").val() == "function" ){
                    $("#filter-type").prop("disabled", true);
                    $("#filter-value").prop("disabled", true);
                }else{
                    $("#filter-type").prop("disabled", false);
                    $("#filter-value").prop("disabled", false);
                }

                $("#example-table").tabulator("setFilter", filter, $("#filter-type").val(), $("#filter-value").val());
            }

            //Update filters on value change
            $("#filter-field, #filter-type").change(updateFilter);
            $("#filter-value").keyup(updateFilter);

            //Clear filters on "Clear Filters" button click
            $("#filter-clear").click(function(){
                $("#filter-field").val("");
                $("#filter-type").val("=");
                $("#filter-value").val("");

                $("#example-table").tabulator("clearFilter");
            });

            function cellClick(e, cell){
                var field = cell.cell.column.field,
                    rowEl,
                    rowIdx,
                    tgEl,
                    holderEl,
                    tableEl;
                
                if( field == "detail" ){

                    //
                    tgEl = $(e.currentTarget);
                    rowEl = tgEl.parent();
                    holderEl = rowEl.find(".holderEl");
                    tableEl = holderEl.children();
                    
                    //
                    rowIdx = parseInt(rowEl.index(), 10);
                    
                    //
                    if( null == _arrPrevTableEl[rowIdx] ){

                        _arrPrevTableEl[rowIdx] = tableEl.tabulator({
                            height:"630px",
                            layout:"fitDataFill",
                            movableColumns:true,
                            tooltips:true,
                            pagination:"remote",
                            ajaxURL:"exampledata.php",
                            ajaxConfig:"POST",
                            ajaxParams:{func:"second_data"},
                            paginationSize:5,
                            placeholder:"No Data Set",
                            columns:[
                                {title:"Name", field:"name", sorter:"string", width:200},
                                {title:"Progress", field:"progress", sorter:"number", formatter:"progress"},
                                {title:"Gender", field:"gender", sorter:"string"},
                                {title:"Rating", field:"rating", formatter:"star", align:"center", width:100},
                                {title:"Favourite Color", field:"col", sorter:"string", sortable:false},
                                {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
                                {title:"Driver", field:"car", align:"center", formatter:"tickCross", sorter:"boolean"},
                            ]
                        });
                    }else{
                        _arrPrevTableEl[rowIdx].tabulator("clearData");
                    }

//                  tgEl.find("i").removeClass(function(index,css){
//                      return (css.match (/(^|\s)fa-plus-circle\S+/g) || []).join(' ');
//                  });
                    
                    _toggle = !_toggle;

                    if( _toggle ){
                        holderEl.slideDown();
                        tgEl.find("i").removeClass("fa-plus-circle").addClass("fa-minus-circle font-red");
                        _arrPrevTableEl[rowIdx].tabulator("redraw").tabulator("setData");
                        
                    }else{
                        holderEl.slideUp();
                        tgEl.find("i").removeClass("fa-minus-circle font-red").addClass("fa-plus-circle");
                    }
                    
                }
            }



        //////////////////////////////
        }); //end. rdy
    </script>
</body>
</html>



   example.php


<?php

$func = $_POST['func'];

if( $func == "first_data" ){

    //build data array
    $data = [
        [id=>1, name=>"Billy Bob", progress=>"12", gender=>"male", height=>1, col=>"red", dob=>"", driver=>1],
        [id=>2, name=>"Mary May", progress=>"1", gender=>"female", height=>2, col=>"blue", dob=>"14/05/1982", driver=>true],
        [id=>3, name=>"Christine Lobowski", progress=>"42", height=>0, col=>"green", dob=>"22/05/1982", driver=>"true"],
        [id=>4, name=>"Brendon Philips", progress=>"125", gender=>"male", height=>1, col=>"orange", dob=>"01/08/1980"],
        [id=>5, name=>"Margret Marmajuke", progress=>"16", gender=>"female", height=>5, col=>"yellow", dob=>"31/01/1999"],
        [id=>6, name=>"Billy Bob", progress=>"12", gender=>"male", height=>1, col=>"red", dob=>"", driver=>1],
        [id=>7, name=>"Mary May", progress=>"1", gender=>"female", height=>2, col=>"blue", dob=>"14/05/1982", driver=>true],
        [id=>8, name=>"Christine Lobowski", progress=>"42", height=>0, col=>"green", dob=>"22/05/1982", driver=>"true"],
        [id=>9, name=>"Brendon Philips", progress=>"125", gender=>"male", height=>1, col=>"orange", dob=>"01/08/1980"],
        [id=>10, name=>"Margret Marmajuke", progress=>"16", gender=>"female", height=>5, col=>"yellow", dob=>"31/01/1999"],

        [id=>11, name=>"Billy Bob", progress=>"12", gender=>"male", height=>1, col=>"red", dob=>"", driver=>1],
        [id=>12, name=>"Mary May", progress=>"1", gender=>"female", height=>2, col=>"blue", dob=>"14/05/1982", driver=>true],
        [id=>13, name=>"Christine Lobowski", progress=>"42", height=>0, col=>"green", dob=>"22/05/1982", driver=>"true"],
        [id=>14, name=>"Brendon Philips", progress=>"125", gender=>"male", height=>1, col=>"orange", dob=>"01/08/1980"],
        [id=>15, name=>"Margret Marmajuke", progress=>"16", gender=>"female", height=>5, col=>"yellow", dob=>"31/01/1999"],
        [id=>16, name=>"Billy Bob", progress=>"12", gender=>"male", height=>1, col=>"red", dob=>"", driver=>1],
        [id=>17, name=>"Mary May", progress=>"1", gender=>"female", height=>2, col=>"blue", dob=>"14/05/1982", driver=>true],
        [id=>18, name=>"Christine Lobowski", progress=>"42", height=>0, col=>"green", dob=>"22/05/1982", driver=>"true"],
        [id=>19, name=>"Brendon Philips", progress=>"125", gender=>"male", height=>1, col=>"orange", dob=>"01/08/1980"],
        [id=>20, name=>"Margret Marmajuke", progress=>"16", gender=>"female", height=>5, col=>"yellow", dob=>"31/01/1999"],
    ];
}else

if ( $func == "second_data" ){
    $data = [
        [id=>1, name=>"랜덤값으로 데이터확인".rand(1, 100), progress=>"12", gender=>"male", height=>1, col=>"red", dob=>"", driver=>1],
        [id=>2, name=>"Mary May", progress=>"1", gender=>"female", height=>2, col=>"blue", dob=>"14/05/1982", driver=>true],
        [id=>3, name=>"Christine Lobowski", progress=>"42", height=>0, col=>"green", dob=>"22/05/1982", driver=>"true"],
        [id=>4, name=>"Brendon Philips", progress=>"125", gender=>"male", height=>1, col=>"orange", dob=>"01/08/1980"],
        [id=>5, name=>"Margret Marmajuke", progress=>"16", gender=>"female", height=>5, col=>"yellow", dob=>"31/01/1999"],
        [id=>6, name=>"Billy Bob", progress=>"12", gender=>"male", height=>1, col=>"red", dob=>"", driver=>1],
        [id=>7, name=>"Mary May", progress=>"1", gender=>"female", height=>2, col=>"blue", dob=>"14/05/1982", driver=>true],
        [id=>8, name=>"Christine Lobowski", progress=>"42", height=>0, col=>"green", dob=>"22/05/1982", driver=>"true"],
        [id=>9, name=>"Brendon Philips", progress=>"125", gender=>"male", height=>1, col=>"orange", dob=>"01/08/1980"],
        [id=>10, name=>"Margret Marmajuke", progress=>"16", gender=>"female", height=>5, col=>"yellow", dob=>"31/01/1999"],

        [id=>11, name=>"Billy Bob".rand(1, 100), progress=>"12", gender=>"male", height=>1, col=>"red", dob=>"", driver=>1],
        [id=>12, name=>"Mary May", progress=>"1", gender=>"female", height=>2, col=>"blue", dob=>"14/05/1982", driver=>true],
        [id=>13, name=>"Christine Lobowski", progress=>"42", height=>0, col=>"green", dob=>"22/05/1982", driver=>"true"],
        [id=>14, name=>"Brendon Philips", progress=>"125", gender=>"male", height=>1, col=>"orange", dob=>"01/08/1980"],
        [id=>15, name=>"Margret Marmajuke", progress=>"16", gender=>"female", height=>5, col=>"yellow", dob=>"31/01/1999"],
        [id=>16, name=>"Billy Bob", progress=>"12", gender=>"male", height=>1, col=>"red", dob=>"", driver=>1],
        [id=>17, name=>"Mary May", progress=>"1", gender=>"female", height=>2, col=>"blue", dob=>"14/05/1982", driver=>true],
        [id=>18, name=>"Christine Lobowski", progress=>"42", height=>0, col=>"green", dob=>"22/05/1982", driver=>"true"],
        [id=>19, name=>"Brendon Philips", progress=>"125", gender=>"male", height=>1, col=>"orange", dob=>"01/08/1980"],
        [id=>20, name=>"Margret Marmajuke", progress=>"16", gender=>"female", height=>5, col=>"yellow", dob=>"31/01/1999"],
    ];
}
//return JSON formatted data
echo(json_encode(["last_page"=>30, "data"=>$data]));



   결과) 화면에서 + 를 누르면




   결과) 아래와 같이 해당 내용이 출력된다.




Posted by SAP (Study And Programming) by serpiko

댓글을 달아 주세요