デモページ 関連する記事 ▼ デモで実際に使用している自家製 API です PHP : SQLインジェクション対策付きの、MySQL のデータを JSON で返す自家製 API テスト用のテンプレート3パターン https://lightbox.sakura.ne.jp/demo/json/syain_api_bind.php https://lightbox.sakura.ne.jp/demo/json/syain_api_bind.php?pretty=no : 整形なし https://lightbox.sakura.ne.jp/demo/json/syain_api_bind.php?escape=no : \uXXXX にエスケープ ▼ TABLE 作成部分はほぼ同じです FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
body {
padding: 10px 0 0 20px;
}
@media screen and ( max-width:479px )
{
body {
padding: 0px;
}
}
#table_wrap {
width:900px;
}
#syain td {
padding: 5px;
border: solid #000000 1px;
white-space: nowrap;
}
#syain th {
background-color: #e0e0e0;
font-weight: bold;
padding: 5px;
border: solid #000000 1px;
white-space: nowrap;
}
</style>
<script>
$(function(){
$("#btn").on( "click", function(){
console.log("クリックされました");
$.ajax({
url: "https://lightbox.sakura.ne.jp/demo/json/syain_api_bind.php",
cache: false,
data: { "name" : $("#cond").val() }
})
.done(function( data, textStatus ){
console.log( "status:" + textStatus );
console.log( "data:" + JSON.stringify(data, null, " ") );
// テーブル作成処理
loadData( data );
})
// 失敗
.fail(function(jqXHR, textStatus, errorThrown ){
console.log( "status:" + textStatus );
console.log( "errorThrown:" + errorThrown );
})
// 常に実行
.always(function() {
console.log("常に実行");
})
;
});
});
function loadData( data ) {
console.log("処理開始");
// テーブル表示リセット
$("#syain tr,#syain th").remove();
// タイトル専用
var title_row;
var title_col_data;
// データ用
var row_data;
var col_data;
// 行のループ ( <tr></tr> )
$.each(data, function( index, value ) {
// 初回はタイトル作成
if ( index == 0 ) {
$.each( value, function( key, val ) {
title_col_data = $("<th></th>").appendTo( "#syain" );
title_col_data.text( key );
});
}
// テーブルに行を追加
row_data = $("<tr></tr>").appendTo( "#syain" );
// 列のループ ( <td></td> )
$.each( value, function( key, val ) {
// 行に列を追加
col_data = $("<td></td>").appendTo( row_data );
col_data.text( val );
});
});
}
</script>
<h3>社員一覧</h3>
<input id="cond" type="text">
<input id="btn" type="button" value="検索">
<div class="table-responsive">
<table id="syain"></table>
</div>
twitter-bootstrap は、スマホでテーブルが横スクロールする効果で使用しています( class="table-responsive" )。
|
|
【jQueryの最新記事】
- jQuery の $.get を使用した ajax のテンプレート
- jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方
- jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック
- FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
- jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート
- jQuery : 貼り付けるだけで、ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )
- STYLE 要素を追加して、CSS テキストをセットして、jQuery で CSS に important 指定を追加する。
- ページの右下に、ページの先頭へ移動するボタンを追加する(ページの先頭から 200px までは、スクロールボタンを表示しない)
- テーブルのTDをクリックしたら、INPUT で値を変更可能にして、元の値と違うものにはフラグを立てる処理を絵で書いて説明してみました
- jQuery を使用してサーバから取得した JSON データを元にテーブルを作成し、その後から列を加工する
- jQuery UI の Datepicker Widget のオプション
- FormData を使用して、jQuery で配列として PHP に送る
- 必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る
- Android Studio の追加日本語化用に、キャラクタセットに依存しないコード文字列を作成するツールを作成しました
- 画像ファイルが存在した時のみ、表示する jQuery の記述
- jQuery で mobile(スマホ) かどうかのチェックをしたくて調べたら、Stack Overflow の記事でいろんな方法が答えられていました。
- jQuery と FileReader オブジェクトによる、ローカルの複数画像ファイルのプレビュー表示
- とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル
- jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理
- jQuery でコンボボックスの選択されたオプションのテキストを取得する場合、optgroup を使っている場合は子孫選択でないと取得されないというお話 / find(子孫) と children(直..
