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で使用できる形に合わせたので無理矢理感がすごいですが、表示だけのものなので動けばおっけーです。
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" } ] }