非常に便利なmRender - シュンツのつまづき日記

【前提条件】

[環境]

jQuery 1.9.0
DataTables 1.9.4

参考サイト

DataTables 公式ページ
DataTables | Table plug-in for jQuery

【概要】

今回はmRenderについてです。

mRenderは取得したデータを
表示用やソート用に加工を行い操作するものです。

【HTMLソース】

HTMLソースは毎回おなじみの形です。

<!DOCTYPE html>
<html>
    <head>
        <title>サンプル</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="/js/libs/jquery-1.9.0/jquery.min.js"></script>
        <script type="text/javascript" src="/js/libs/datatables-1.9.4/jquery.dataTables.min.js" ></script>
        <script type="text/javascript" src="/js/sampleApps.js"></script>
        <style>
            table {
                border: 1px;
                white-space: nowrap;
                width: 50%;
            }
            table th {
                text-align: center;
            }
            table#value_table th {
                background-color: lightgreen;
            }
            div.header_area {
                width: 50%;
                text-align: right;
            }
            div.header_area {
                width: 50%;
                text-align: right;
            }
            div#header_left {
                float :left;
            }
        </style>
    </head>
    <body>
        <table id="value_table"></table>
    </body>
</html>

【JSONデータ】

JSONデータには前回からcountを追加しています。

{
    "valueList" : [
        { "no" : 5, "name" : "りんご", "count" : 6 },
        { "no" : 3, "name" : "みかん", "count" : 1 },
        { "no" : 1, "name" : "なし", "count" : 2 },
        { "no" : 2, "name" : "いちご", "count" : 4 },
        { "no" : 4, "name" : "バナナ", "count" : 5 }
    ]
}

【JavaScriptソース】

$(function() {
    $('#value_table').dataTable({
        sAjaxSource : "/js/sample04/jsonData.json",
        sAjaxDataProp : "valueList",
        sDom : "<f>t",
        aoColumns : [
            {
                sTitle : "No.",
                mData : "no"
            },
            {
                sTitle : "名称",
                mData : "name"
            },
            {
                sTitle : "個数",
                mData : "count",
                mRender : function(data, type, full) {
                    if (type === "display") {
                        if (5 < data) {
                            return "○(" + data + ")";
                        }

                        if (3 < data) {
                            return "△(" + data + ")";
                        }

                        return "×(" + data + ")";
                    }
                    if (type === "sort") {
                        if (5 < data) {
                            return 0;
                        }

                        if (3 < data) {
                            return 2;
                        }

                        return 1;
                    }

                    if (type === "filter") {
                        var searchData = ["zero", "one", "two", "three", "four", "five", "six"];

                        return searchData[data];
                    }

                    return data;
                }
            }
        ]
    });
} );