datatableの使用

で学習することができます。 http://www.guoxk.com/node/jquery-datatables

http://yuemeiqing2008-163-com.iteye.com/blog/2006942

1:パッケージをインポートします。

    URLを指定します。 http://www.datatables.net/

   cssとjsのファイルを別々にインポートする

Htmlコード  

1. <スパン < スタイル タイプ = "text/css"。 タイトル = <スパン "currentStyle"。 >
2. @import "css/demo_page.css";  
4. @import "css/demo_table.css";  
6. @import "css/demo_table_jui.css";  
7. </ スタイル >
8. < スクリプト タイプ = "text/javascript"。 言語 = <スパン "javascript"。
9. <スパン src = "js/jquery.js"。 > </ スクリプト >
10. <スパン
11. <スパン < スクリプト タイプ = "text/javascript"。 言語 = <スパン "javascript"。
12. <スパン src = "js/jquery.dataTables.js" > </ スクリプト >

 読み込み

Htmlコード  

1. <スパン < スクリプト タイプ = "text/javascript"。 <スパン >
2.         $(document).ready(function() {)  
3.             $('#example').dataTable();  
4.         });  
5. </ スクリプト >

 フォーム

Htmlコード  

1. <スパン < ディブ クラス = "col_2_3_right"。 >
2. < ディブ クラス = <スパン "index_viewport" >
3. < テーブル イド = "例" セルパディング = 0" セルスペーシング = 0" ボーダー = "0" 幅 = "100%"。 >
4. < テード >
5. < tr >
6. < th 幅 = "20%"。 > 名前 </ th >
7. < th 幅 = "20%"。 > ラストネーム </ th >
8. < th 幅 = "35%"。 > 都市名 </ th >
9. < th 幅 = <スパン "25%"。 > 日付 </ th >
10. <スパン </ tr >
11. <スパン </ テード >
12. <スパン </ テーブル >
13. <スパン </ ディブ >
14. <スパン </ ディブ >

問題：datatableメソッドが見つからないとプロンプトが表示されることがある

 バックエンドのAjaxからデータテーブルを再構築する(フォームのidはjsonのキーと一致する必要がある)

Jsコード  

1. $.ajax({  
2.                     　　タイプになります。 'ゲット' , //オプションのget
3.                     　　のURLを指定します。 '${projectPath}/search' です。 ,  
4.                     　　data:{。 <未定義 "channelType" :$( '#channelType' ).val(), "チャンネル"。 :$( '#channel' ).val(), 日(quot;day".) :$( '#day' ).val()。 startTime" :$( '#startTime' ).val(), endTime" :$( '#endTime' ).val(), データベース" :$( '#database' ).val()},  
5.                     　　dataType: 'テキスト' , //サーバーから返されるデータ型は、XML ,Json jsonp script htmltext などです。
6.                     　　を成功させる。 機能 (msg){  
7. ヴァル  msgObj=JSON.parse(msg)。  
8. //テーブルを再構築する
9.                          $( '#example' ).dataTable().fnClearTable();    //データをクリアにする
10.                     　    $( '#example' ).dataTable().fnAddData(packagingdatatabledata(msgObj), 真 );   // データは json オブジェクトまたは json オブジェクトの配列でなければなりません。
12.                 　　},  
13.                     　　のエラーが発生しました。 機能 (){  
14.                     　　alert( 'エラー' );  
15.                     　　}  
16.             })})  

受信データ

Jsコード  

1. //サーバーから返されたデータを、データテーブルが必要とする形式に変換します。
2. 機能  packagingdatatabledata(msgObj){...  
3. ヴァル  editHtml= "<a class='btn' data-toggle='modal' href='#modalbackdroptrue' >edit</a>" ;  
4. <スパン //var editHtml="<a class='btn' href='#modalbackdroptrue' data-toggle='modal' >edit</a>" となります。
5. ヴァル  a=[];  
6. ヴァル  tableName=[ '日' , 'データ' , 'indata' , '編集' ];  
7. ヴァル  banddata=storjson(msgObj[]) 'データ' ]);  
8. <スパン ヴァル  bandindata=storjson(msgObj[]) 'indata' ]);  
9. <スパン について ( ヴァル  キー  で  バンドデータ){  
10. <スパン ヴァル  tempObj= 新しい  Object()を使用します。  
11.                 tempObj.day=keyとする。  
12.                 tempObj.data=banddata[key]。  
13.                 tempObj.indata=bandindata[key]となります。  
14.                 tempObj.edit=editHtml。  
15.                 a.push(JSON.parse(JSON.stringify(tempObj,tableName)));