layui table的行列如何转置(表头为动态可选的日期)

layui table的行列如何转置(表头转换为动态日期,并且可以按照月份选择)
需求样式:

img


数据库信息:
id datetime name score
1 5月1日 张三 43
2 5月1日 李四 87
3 5月1日 王五 90
4 5月1日 JD 23
5 5月1日 JC 54
6 5月1日 小明 32
7 5月1日 小青 12
8 5月1日 才子 23
9 5月1日 彤彤 67
10 5月1日 悠悠 82
11 5月2日 张三 43
12 5月2日 李四 87
13 5月2日 王五 90
14 5月2日 JD 23
15 5月2日 JC 54
16 5月2日 小明 32
17 5月2日 小青 12
18 5月2日 才子 23
19 5月2日 彤彤 67
目前的代码,表头为姓名:

  <script>
layui.use('table', function(){
  var table = layui.table;
  var $ = layui.jquery;
    var tableFilter = layui.tableFilter;
  
  var tableIns = table.render({
    elem: '#test'
    ,url: './score_data.php' //数据接口,json格式
    ,toolbar:'#toolbarDemo'
    ,defaultToolbar: ['filter', 'print']
    ,loading:true
    ,height:'full-20'
    ,skin:''
    ,size:''
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:'5%', sort: true, fixed: 'left'}
      ,{field: 'name', title: '姓名', width:'8%'}
      ,{field: 'datetime', title: '日期', width:'10%'}
      ,{field: 'score', title: '分数', width:'10%'}
         ]]
    ,where:{
        }
        , page: true
        , limits: [50,100,150,200,250,300,350,400,450,500]
        , limit: 50 //每页默认显示的数量
  });


可以参考演示网站,帮助文档说明:https://www.layui.site/demo/index.htm