DataTables

by sarunokoshikake

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
<script src="https://cdn.rawgit.com/ashl1/datatables-rowsgroup/fbd569b8768155c7a9a62568e66a64115887d7d0/dataTables.rowsGroup.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/fixedheader/3.1.3/css/fixedHeader.dataTables.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script src="https://cdn.rawgit.com/ashl1/datatables-rowsgroup/fbd569b8768155c7a9a62568e66a64115887d7d0/dataTables.rowsGroup.js"></script>
    <script src="https://cdn.datatables.net/fixedheader/3.1.3/js/dataTables.fixedHeader.min.js"></script>
    <div class="container">
      <table id="example" class="display" width="100%">
      </table>
    </div>

CSS

body { font-size: 10px; }
table {
  margin: 0 auto;
  width: 400px;
}
table, th, td {
  border: 1px solid #ccc;
  border-collapse: collapse;
}
th, td {
  padding: 1px 1px
}
th {
  background-color: #666;
  color: #fff;
}

JavaScript

$(document).ready( function () {
  var getMeasureData = [
		{
		  measure_management_id: 29,
		  status: 1,
		  disclosure_type: 1,
		  agent_name: null,
		  agent_contract_name: null,
		  client_admin_name: "齋藤弘樹",
		  client_id: 201647,
		  client_name: "ライフカード株式会社 ",
		  publisher_id: 1248959,
		  publisher_name: "株式会社ジェーピーツーワン",
		  publisher_admin_name: "北島翔太",
		  media_id: 1412944,
		  media_name: "クレジットカード財津ラボ",
		  media_url:  "http://creditcard.zaitsu-labs.com/",
		  promotion_sub_category:  "金融・クレジットカード ",
		  promotion_id: 303044,
		  promotion_name: "ライフカード",
		  thanks_id: 10873,
		  thanks_name: "クレジットカード発券",
		  unit_price_type: 0,
		  unit_price_money_in: 7350,
		  unit_price_money_out: 7000,
		  unit_price_money_margin: 350,
		  fixed_cost_type: 0,
		  fixed_cost_money_in: 1050000,
		  fixed_cost_money_out: 1000000,
		  fixed_cost_money_margin: 50000,
		  table_current_fixed_cost_money_in: null,
		  table_current_fixed_cost_money_out: null,
		  table_current_fixed_cost_margin: null,
		  target_action_count: 1000,
		  acquisition_action_count: null,
		  landing_action_count: null,
		  divergence_action_count: null,
		  required_action_count_per_day: null,
		  start_date: "2017/08/01",
		  end_date: "2018/08/31",
		  registant_user_name: "北島翔太",
		  create_date: "2017/07/26"
		},
		{
		  measure_management_id: 28,
		  status: 0,
		  disclosure_type: 0,
		  agent_name: null,
		  agent_contract_name: null,
		  client_admin_name: "武内大弥",
		  client_id: 202698,
		  client_name: "株式会社オリエントコーポレーション",
		  publisher_id: 1280951,
		  publisher_name: "株式会社エスポワール",
		  publisher_admin_name: "渡辺励",
		  media_id: 1505862,
		  media_name: "法人クレジットカード選び",
		  media_url:  "http://www.espoir-inc.com/houjincard/ ",
		  promotion_sub_category:  "金融・クレジットカード ",
		  promotion_id: 305178,
		  promotion_name: "オリコ「エグゼクティブ ゴールド フォービズ　アイディー×クイックペイ」",
		  thanks_id: 400318,
		  thanks_name: "クレジットカード発券 ",
		  unit_price_type: 0,
		  unit_price_money_in: 13000,
		 ...