:HTML/embed_music_list のバックアップ(No.5)

<script type="text/javascript" src="http://maplia.jp/script/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="http://maplia.jp/script/jquery.json2table.js"></script>
<script type="text/javascript">
  var musics;
  var table;

  $(document).ready(function() {
    $.getJSON('http://cxbrank.maplia.jp/api/musics?callback=?', function(data) {
      musics = data;
      table = $('#table_musics');
      createMusicTable(0);
    });
  });

  function createMusicTable(diff) {
    var table_data = {};
    table_data.thead = [];
    table_data.tbody = [];
    table_data.thead[0] = {
      class_name: ['style_th', 'style_th', 'style_th', 'style_th', 'style_th'],
      values: ['#', 'タイトル', '難易度', 'レベル', 'ノート数']
    };

    $.each(musics, function(i, music) {
      if ((diff == 0) || (diff == 1)) {
        table_data.tbody[table_data.tbody.length] = {
          class_name: 'bsc',
          values: [
            music.number, music.title, 'STD',
            new Number(music.bsc.level).toFixed(1), music.bsc.notes
          ]
        };
      }
      if ((diff == 0) || (diff == 2)) {
        table_data.tbody[table_data.tbody.length] = {
          class_name: 'adv',
          values: [
            music.number, music.title, 'HRD',
            new Number(music.adv.level).toFixed(1), music.adv.notes
          ]
        };
      }
      if ((diff == 0) || (diff == 3)) {
        table_data.tbody[table_data.tbody.length] = {
          class_name: 'ext',
          values: [
            music.number, music.title, 'MAS',
            new Number(music.ext.level).toFixed(1), music.ext.notes
          ]
        };
      }
    });
    table.json2table(table_data);
    table.tablesorter({sortList: [[3, 1]]});
  }
</script>
<p>
  <label><input type="radio" name="filt" onchange="createMusicTable(0)" checked="checked"> 全譜面</label>
  <label><input type="radio" name="filt" onchange="createMusicTable(1)"> STANDARD</label>
  <label><input type="radio" name="filt" onchange="createMusicTable(2)"> HARD</label>
  <label><input type="radio" name="filt" onchange="createMusicTable(3)"> MASTER</label>
</p>
<table id="table_musics" class="tablesorter style_table" cellspacing="1" border="0"></table>