これを行う方法をネットで見つけることができる唯一のものはここにあり、私はまだ困惑しています。それを理解することはできません.
私は基本的に JavaScript ベースのテーブルを持っており、いくつかのフィールドに画像または単純なグリフィコンへのリンクを含めたいと考えています。
たとえば、フィールドsheet1、sheet2、sheet3実際のファイルにリンクする PDF などであるため、PDF アイコンの画像またはグリフを含めたいと考えています。
これを行う方法について私が見つけた記事のほとんどは静的テーブルに関するものです.私のものは動的であるため、これに関する情報を見つけるのに苦労しています.
どこから始めればよいのかわかりません。正しい方向に向けることができるアイデアは素晴らしいでしょう。
jquery/ブートストラップ
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$('#table-javascript').bootstrapTable({
method: 'get',
url: 'bootstrap_database.php',
height: 600,
cache: false,
striped: true,
pagination: true,
search: true,
pageSize: 20,
pageList: [20, 40, 60, 100, 200],
minimumCountColumns: 2,
clickToSelect: true,
columns: [{
field: 'title',
title: 'Title',
align: 'center',
sortable: true
},{
field: 'audio',
title: 'Audio',
align: 'center',
sortable: true
},{
field: 'sheet1',
title: 'Sheet 1',
align: 'center',
sortable: true
},{
field: 'sheet2',
title: 'Sheet 2',
align: 'center',
sortable: true
},{
field: 'sheet3',
title: 'Sheet 3',
align: 'center',
sortable: true
},{
field: 'lyrics',
title: 'Lyrics',
align: 'center',
sortable: true
},{
field: 'sheet1notes',
title: 'Notes 1',
align: 'center',
sortable: true
},{
field: 'sheet2notes',
title: 'Notes 2',
align: 'center',
sortable: true
},{
field: 'sheet3notes',
title: 'Notes 3',
align: 'center',
sortable: true
}]
});
});
HTML
<div class="container">
<section>
<div class="row">
<h1>Music</h1>
<table id="table-javascript" class="table"></table>
</div>
</section>
</div>