げぼげぼメモ

自分用いろいろメモです

datatables ヘッダータイトルを変更

データ読み込み後にタイトル名を変更します。

名前を配列にしとけばもう少し綺麗になります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css"/>
      <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
  </head>
<body>
	<input type="file" name="file" id="file" accept="text/json">

    <table id="testTable" class="table table-bordered">
        
    </table>
</body>

<script>
    $(document).ready(function() {
		var elems = { "fileField": document.getElementById("file") };
		var reader = new FileReader();
		
		elems.fileField.addEventListener("change", function(ev_) {	
			reader.readAsText(ev_.target.files[0]);
		});

		reader.onload = function(ev_) {
			var jsonObj = JSON.parse(ev_.target.result);
			console.log(jsonObj);
			var datatables = $('#testTable').DataTable({
				data: jsonObj.data,
				columns: [
				  { data: "name" },
				  { data: "position" },
				  { data: "salary" },
				  { data: "start_date" },
				  { data: "office" },
				  { data: "extn" }
				]
			})
			
			changeHeader(0, "name");
			changeHeader(1, "position");
			changeHeader(2, "salary");
			changeHeader(3, "start_date");
			datatables.columns.adjust().draw();

			function changeHeader(index, name) {
				$(datatables.column(index).header()).html(name);
			}
		}
	});
</script>

</html>

File APIを使って読み込んだJsonをdatatablesで表示

Ajax通信を使う場合はブラウザの設定が必要だったりで大変なので
File APIで読み込めるようにします。

基本的なコードや使用しているデータはAjax通信でやったときのものです。
これだとファイルを読み込んでからdatatablesを初期化しているので、ファイルを読み込むまでテーブルの表示がおかしいです。
直し方はまた今度調べます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css"/>
      <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
  </head>
<body>
	<input type="file" name="file" id="file" accept="text/json">

    <table id="testTable" class="table table-bordered">
        <thead>
            <tr>
                <th>name</th>
                <th>position</th>
                <th>salary</th>
                <th>start_date</th>
                <th>office</th>
                <th>extn</th>
            </tr>
        </thead>
    </table>
</body>

<script>
    $(document).ready(function() {
		var elems = { "fileField": document.getElementById("file") };
		var reader = new FileReader();
		
		elems.fileField.addEventListener("change", function(e) {	
			reader.readAsText(e.target.files[0]);
		});

		reader.onload = function(e) {
			var jsonObj = JSON.parse(e.target.result);
			console.log(jsonObj);
			$('#testTable').DataTable({
				data: jsonObj.data,
				columns: [
				  { data: "name" },
				  { data: "position" },
				  { data: "salary" },
				  { data: "start_date" },
				  { data: "office" },
				  { data: "extn" }
				]
			})
		}
	});
</script>

</html>

C# テキストファイルを読み込んでjson形式で出力

適当なフォーマットのテキストデータを読み込んでjson形式で出力します。
ログに出力したデータをDatatablesで表示できるような形にするイメージです。

data.txt

[Player] X[1] Y[2] Type[0]
[Enemy] Level[1] Name[xxx] Color[Red]
----------------------------------
[Player] X[2] Y[2] Type[1]
[Player] X[1] Y[3] Type[2]
[Enemy] Level[4] Name[yyy] Color[Green]
----------------------------------
[Player] X[3] Y[3] Type[3]
[Enemy] Level[3] Name[zzz] Color[Blue]
[Enemy] Level[1] Name[www] Color[Black]

最初の[Player]や[Enemy]がデータの種類、Level[...]などがパラメータ名、[...]内の値がデータです。
データ以外の行も含まれることを想定しています。

データの種類ごとにファイル別に出力します。

using System;
using Newtonsoft.Json;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;

namespace DataViewer.Models
{
    public class PlayerList
    {
        [JsonProperty("data")]
        public List<Player> Players { get; set; } = new List<Player>();
    }
    public class EnemyList
    {
        [JsonProperty("data")]
        public List<Enemy> Enemies { get; set; } = new List<Enemy>();
    }

    public class Player
    {
        public int X { get; set; } = 0;
        public int Y { get; set; } = 0;
        public int Type { get; set; } = 0;

    }

    public class Enemy
    {
        public int Level { get; set; } = 0;
        public string Name { get; set; } = "";
        public string Color { get; set; } = "";
    }

    public class DataConverter
    {
        private string inputFilePath = "";
        private PlayerList playerList = new PlayerList();
        private EnemyList enemyList = new EnemyList();

        /// <summary>
        /// コンストラクタ
        /// </summary>
        /// <param name="filePath">入力ファイルパス</param>
        public DataConverter(string filePath)
        {
            inputFilePath = filePath;
            ReadData();
            OutputPlayer();
            OutputEnemy();
        }

        /// <summary>
        /// テキストファイル読み込み
        /// </summary>
        private void ReadData()
        {
            StreamReader sr = new StreamReader("data.txt", Encoding.GetEncoding("Shift_JIS"));

            char[] delim = { '[', ']' }; // splitの分割用
            while (sr.EndOfStream == false)
            {
                string line = sr.ReadLine();
                string[] data = line.Split(delim);
                int dataSize = data.Count();
                if (dataSize < 2) continue; // データ以外の行はとばす


                if (data[1] == "Player" && dataSize >= 7)
                {
                    // [Player] X[1] Y[2] Type[3]
                    // data[0] = "", data[1] = "Player", data[2] = " X", ...
                    int x = Int32.Parse(data[3]);
                    int y = Int32.Parse(data[5]);
                    int type = Int32.Parse(data[7]);
                    playerList.Players.Add(new Player { X = x, Y = y, Type = type });
                }
                else if (data[1] == "Enemy" && dataSize >= 7)
                {
                    // [Enemy] Level[1] Name[aaa] Color[Red]
                    // data[0] = "", data[1] = "Enemy", data[2] = " Level", ...
                    int level = Int32.Parse(data[3]);
                    string name = data[5];
                    string color = data[7];
                    enemyList.Enemies.Add(new Enemy { Level = level, Name = name, Color = color });
                }
            }
            sr.Close();
        }

        /// <summary>
        /// プレイヤーデータをjson形式で出力
        /// </summary>
        private void OutputPlayer()
        {
            string jsonStr = JsonConvert.SerializeObject(playerList, Formatting.Indented);
            File.WriteAllText(@"player.json", jsonStr);
        }

        /// <summary>
        /// 敵データをjson形式で出力
        /// </summary>
        private void OutputEnemy()
        {
            string jsonStr = JsonConvert.SerializeObject(enemyList, Formatting.Indented);
            File.WriteAllText(@"enemy.json", jsonStr);
        }        
    }
}

Json.NETを使用しています。Nugetでの追加が必要です。


Datatablesで使用できる形に合わせたので無理矢理感がすごいですが、表示だけのものなので動けばおっけーです。


参考
C# による JSON 相互変換 (Json.NET 利用) - clock-up-blog

Datatables セレクトボックスから検索値を変更

セレクトボックスで選んだ値をdatatableのsearchに使用します。
jsonは1つ前の記事と同じものを使用。

test.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css"/>
      <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
  </head>
<body>
    <select id="testSelect" onchange="chengeSelect()"></select>

    <table id="testTable" class="table table-bordered">
        <thead>
            <tr>
                <th>name</th>
                <th>position</th>
                <th>salary</th>
                <th>start_date</th>
                <th>office</th>
                <th>extn</th>
            </tr>
        </thead>
    </table>
</body>

<script>
    var arr = [
      "Director", "Edinburgh", "System"
    ];

    $(document).ready(function() {
      $('#testTable').DataTable({
        //pageLength: 2,                      // デフォルトの表示数
        //oSearch: { "sSearch": "Director" }, // デフォルトの検索値
        "ajax": {
          url: "data.json",
        },
        columns: [
          { data: "name" },
          { data: "position" },
          { data: "salary" },
          { data: "start_date" },
          { data: "office" },
          { data: "extn" }
        ]
      });

      for(var i = 0; i < 3; ++i){
        let op = document.createElement("option");
        op.value = i;
        op.text = arr[i];
        document.getElementById("testSelect").appendChild(op);
      }
    });

    function chengeSelect() {
      var index = document.getElementById("testSelect").selectedIndex;
      var text = arr[index];
      var table = $('#testTable').DataTable().search(text).draw();
    }
</script>

</html>

Datatables Ajax通信 Jsonファイルオブジェクト読み込み

datatableのデータとしてオブジェクト形式のjsonデータを使うやり方。
ローカルで表示する場合はchromeだとセキュリティポリシーがうんたらでファイルが読み込めないので、firefoxを使うかオプション付きでchromeを起動しておく必要がある。

test.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css"/>
      <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
  </head>
<body>
    <table id="testTable" class="table table-bordered">
        <thead>
            <tr>
                <th>name</th>
                <th>position</th>
                <th>salary</th>
                <th>start_date</th>
                <th>office</th>
                <th>extn</th>
            </tr>
        </thead>
    </table>
</body>

<script>
    $(document).ready(function() {
      $('#testTable').DataTable({
        "ajax": {
          url: "data.json",
        },
        columns: [
          { data: "name" },
          { data: "position" },
          { data: "salary" },
          { data: "start_date" },
          { data: "office" },
          { data: "extn" }
        ]
      });
    });
</script>

</html>

data.json

{
  "data": [
    {
      "name":       "Tiger Nixon",
      "position":   "System Architect",
      "salary":     "$3,120",
      "start_date": "2011/04/25",
      "office":     "Edinburgh",
      "extn":       "5421"
    },
    {
      "name":       "Garrett Winters",
      "position":   "Director",
      "salary":     "$5,300",
      "start_date": "2011/07/25",
      "office":     "Edinburgh",
      "extn":       "8422"
    },
    {
      "name":       "Tiger Nixon",
      "position":   "System Architect",
      "salary":     "$3,120",
      "start_date": "2011/04/25",
      "office":     "Edinburgh",
      "extn":       "5421"
    }
  ]
}