0

jQuery Datatables を使用して、データベースから取得したクエリをページ分割しようとしています。使用されるクエリには、多くのクエリのフォーマットと結合が含まれるため、完成した配列を作成することにしました。これを現在 Datatables 用にフォーマットしようとしています。

私のHXTMLにはjQueryがあり、jQuery DataTableプラグインがロードされ、HXTMLは次のようになります。

<span id='search'>
</span>
<script type='text/javascript' >
$(document).ready(function() {
  $('#search').html("<table id='search_table' class='tablesorter'></table>");
  $('#search_table').dataTable( {
    'aaData': [ 
    [ 'example status 2', '1', '2011-06-15', '2011-06-15', '2011-06-15', '', 'Bill',   'Father', '1', 'Henry', 'Husband', '1', 'Hamilton Harron Funeral Home', 'Dan Thompson', 'Steve', '1', '2001-05-11', '2', '2003-11-05', 'Non Registrant Test Program - Advantage', '--', '--', '--', 'Onelia', 'Gamboli', 'home', '', 'Houston', 'Texas', '77019', '--', '--', '--', '--', '--', '', 'Pre-Need', 'This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  '  ]
    , [ '', '2', '2011-07-02', '2011-07-02', '2011-07-02', '', '--', '--', '--', '--', '--', '--', 'Floral Haven Funeral Home ', 'Jayson Gordon', 'Henry', '3', '2003-12-02', '4', '2004-03-05', 'Non Registrant Test Program - Advantage', '--', '--', '--', 'Leona', 'Brown', 'home', '5110 Rodgewill Rd ', 'Burlington', 'Sussex', '79011', '9023219235', '--', '9026323532', '--', '--', 'h@hios.com', 'PN to AN', 'This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  '  ]
    , [ 'example1 status', '3', '2011-09-05', '2011-09-05', '2011-09-05', '', 'Onelia', 'Wife', '1', '--', '--', '--', 'First Memorial Funeral Services', 'Dan', 'Steve', '5', '2010-11-11', '7', '2011-08-19', 'Non Registrant Test Program - Dignity', '6', '2011-07-03', 'Non Registrant Test Program - Advantage', 'Henry', 'Sale', 'company', '4125 Harvester Rd. 4', 'Sussex', 'Widimer', '72212', '9025229202', '9027205202', '--', '--', '--', 'pewter@live.ca', 'At-Need', 'This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  '  ]
    ],                       
    'aoColumns': [
    {      'sTitle': 'Status'    }
    ,{      'sTitle': 'Contact ID Number'    }
    ,{      'sTitle': 'Date Entered'    }
    ,{      'sTitle': 'Date Assigned'    }
    ,{      'sTitle': 'Date Last Modified'    }
    ,{      'sTitle': 'Deceased Date'    }
    ,{      'sTitle': 'Linked To Registrant 1'    }
    ,{      'sTitle': 'Relationship 1'    }
    ,{      'sTitle': 'Authorization 1'    }
    ,{      'sTitle': 'Linked To Registrant 2'    }
    ,{      'sTitle': 'Relationship 2'    }
    ,{      'sTitle': 'Authorization 2'    }
    ,{      'sTitle': 'Location', 'sClass': 'location_cell'    }
    ,{      'sTitle': 'Sales Manager'    }
    ,{      'sTitle': 'Counselor'    }
    ,{      'sTitle': 'Registration Number'    }
    ,{      'sTitle': 'Registration Date'    }
    ,{      'sTitle': 'Program 1 Number'    }
    ,{      'sTitle': 'Program 1 Date', 'sClass': 'program_cell'    }
    ,{      'sTitle': 'Program 1 Name', 'sClass': 'program_cell'    }    
    ,{      'sTitle': 'Program 2 Number'    }
    ,{      'sTitle': 'Program 2 Date', 'sClass': 'program_cell'    }
    ,{      'sTitle': 'Program 2 Name', 'sClass': 'program_cell'    }
    ,{      'sTitle': 'First Name'    }
    ,{      'sTitle': 'Last Name'    }
    ,{      'sTitle': 'Address Location 1'    }
    ,{      'sTitle': 'City 1'    }
    ,{      'sTitle': 'State/Province 1'    }
    ,{      'sTitle': 'Zip/Postal Code 1'    }
    ,{      'sTitle': 'Home Phone'    }
    ,{      'sTitle': 'Work Phone'    }
    ,{      'sTitle': 'Mobile Phone'    }
    ,{      'sTitle': 'Pager'    }
    ,{      'sTitle': 'Other Phone'    }
    ,{      'sTitle': 'Sales Type'    }
    ,{      'sTitle': 'Note 1', 'sClass': 'note_cell'    }
    ]                  
  } );
} );
</script>

このデータは次の例とほぼ同じようにフォーマットされているため、DataTables がテーブルを作成していない理由がわかりません: Datatable Javascript 配列の例

このデータのページ分割に DataTable を使用したいと思います。

なぜこれが機能しないのか、それとも私があなたに十分な量を与えていないのか分かりますか?

4

3 に答える 3

1

ターゲットを明確にし<span id="search"></span>(コード例にいくつかの山かっこがありません)、コードを少しきれいにすると (36 列と 38 データ ポイントがあります)、動作するはずです。

http://jsfiddle.net/fvgAU/1/

于 2011-11-29T00:54:18.247 に答える
0

多かれ少なかれ私のために働いているようです。問題は初期化でも配列でもないと思います。

http://live.datatables.net/ojuhep

それを超えてトラブルシューティングを開始するためにも、壊れている場所の実例を見る必要があると思います. それがCSSであるかどうかを確認し、他の場所からのJSと競合しています...

于 2011-11-29T18:50:51.240 に答える
0

これを機能させることができました。秘訣は、もともと私がすべての JavaScript を Web ページの下部にロードしていたことです。これは通常は良い方法ですが、Datatables はページの上部にロードされるのが好きなようです。CSS が競合している可能性があるため、css を適用する前にローダーにする必要がありますか、それとも単にこれが必要なのでしょうか?

これについてみんなの助けをありがとう!

よろしく、スティーブ

于 2011-11-29T19:20:07.000 に答える