Ringkasan penggunaan jadual jQuery plug-in datatables_jquery
DataTables ialah pemalam jadual jQuery. Ini adalah alat yang sangat fleksibel berdasarkan peningkatan progresif yang akan menambah kawalan interaktif lanjutan dan sokongan untuk sebarang bentuk HTML.
Tapak web rasmi dan alamat muat turun: http://www.datatables.net
Versi terkini ialah 1.10.2, pembaca boleh klik di sini Muat turun tapak ini.
Ciri utama adalah seperti berikut:
1. Pemprosesan halaman automatik
2. Penapisan data jadual segera
3. Pengisihan data dan pengesanan automatik jenis data
4. Mengendalikan lebar lajur
secara automatik
5. Gaya boleh disesuaikan melalui CSS
6. Sokong lajur tersembunyi
7.Mudah digunakan
8. Kebolehskalaan dan fleksibiliti
9.Pengantarabangsaan
10. Buat jadual secara dinamik
11. Percuma
Cara menggunakan:
Pertama lihat kod berikut:
<title>DataTables example</title> <style type="text/css" title="currentStyle"> @import "../../media/css/demo_page.css"; @import "../../media/css/demo_table.css"; @import "../examples_support/themes/smoothness/jquery-ui-1.7.2.custom.css"; </style> <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" charset="utf-8">
Perkenalkan fail js dan css ke dalam kod di atas. Anda boleh menyalinnya dalam demo. Beri perhatian kepada alamat laluan.
Mari kita lihat kod berikut:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sUrl": "/SSS/dataTables/de_DE.txt"
},
"bStateSave": true,
//"bJQueryUI": true, //使用jqueryui 。我用的时候显示的不是很好
"sPaginationType": "full_numbers"//分页
} );
} );
</script>
</head>
<body id="dt_example">//此处为body的id
<div id="container" align="center">//*div 里是 table ，table包括thead等，最好按此格式写*
<h1>物品种类管理</h1>
<div id="demo">
<table cellpadding="5" cellspacing="0" border="1" class="display" id="example" align="center">//id 别忘了
<thead>
<tr>
<th>物品编号</th>
<th>物品名称</th>
<th>物品单位</th>
<th>编辑状态</th>
<th>随便</th>
</tr>
</thead>
<tr class="gradeX">//此处可以是gradeA ,gradeX 等，但是gradeB 隔行换色 效果很好
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
</div>
Di atas boleh mencipta kesan seperti yang ditunjukkan dalam gambar, penomboran. Isih. dll.
Akhir sekali, mari bercakap tentang setiap atribut (lokasi utama untuk ditambah)
//$(document).ready(function() {
//$('#example').dataTable( {//加载
//"bPaginate": true,//分页按钮
//"bLengthChange": true,//每行显示记录数
//"bFilter": true,//搜索栏
//"bSort": true,//排序
//"bInfo": true,//Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息
//"bAutoWidth": true } );
//} );
//$(document).ready(function() {
//$('#example').dataTable( {
//"aaSorting": [[ 4, "desc" ]]//给列表排序 ，第一个参数表示数组 。4 就是css grade那列。第二个参数为 desc或是asc
//} );
//} );
//$(document).ready(function() {
//$('#example').dataTable( {
//"aoColumns": [
// /* Engine */ null, //默认
// /* Browser */ null,
// /* Platform */ { "bSearchable": false, //不可参与搜索
// "bVisible": false },//不可见
// /* Version */ { "bVisible": false },//不可见
// /* Grade */ null
//] } );
//} );
//$(document).ready(function() {
//$('#example').dataTable({
//});
//} );
//$(document).ready(function() {
//$('#example').dataTable( {
//"sDom": '<"top"i>rt<"bottom"flp<"clear">'//这段是自定义布局没搞明白挺复杂的。 * l - Length changing * f - Filtering input* t - The table!* i - Information* p - Pagination* r - pRocessing* < and > - div elements* <"class" and > - div with a class * Examples: <"wrapper"flipt>, <lf<t>ip>
//} );
//} );
//$(document).ready(function() {
// $('#example').dataTable( {
// "bStateSave": true //保存状态到cookie *************** 很重要 ， 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了
//} );
//} );
//$(document).ready(function() {
//$('#example').dataTable( {
//"sPaginationType": "full_numbers" //分页，一共两种样式 另一种为two_button 是datatables默认
//} );
//} );
//$(document).ready(function() {
//$('#example').dataTable( { //分页信息 不是很难理解。
//"oLanguage": {
//"sLengthMenu": "Display _MENU_ records per page",
//"sZeroRecords": "Nothing found - sorry",
//"sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
//"sInfoEmtpy": "Showing 0 to 0 of 0 records",
//"sInfoFiltered": "(filtered from _MAX_ total records)"
//}
//} );
//} )
$(document).ready(function() {
oTable = $('#example').dataTable({
"bJQueryUI": true, //可以添加 jqury的ui theme 需要添加css
"sPaginationType": "full_numbers"
});
} );
Bahasa lalai ialah bahasa Inggeris, sudah tentu ia boleh diantarabangsakan:
"sUrl": "/SSS/dataTables/de_DE.txt" Hanya tambah fail antarabangsa. Nama boleh apa sahaja asalkan laluannya betul. Kandungan fail pengantarabangsaan yang saya tulis adalah seperti berikut, yang boleh terus disalin ke txt untuk digunakan.
{
"sProcessing": "Bitte warten...",
"sLengthMenu": "显示_MENU_条 ",
"sZeroRecords": "没有您要搜索的内容",
"sInfo": "从_START_ 到 _END_ 条记录——总记录数为 _TOTAL_ 条",
"sInfoEmpty": "记录数为0",
"sInfoFiltered": "(全部记录数 _MAX_ 条)",
"sInfoPostFix": "",
"sSearch": "搜索",
"sUrl": "",
"oPaginate": {
"sFirst": "第一页",
"sPrevious": " 上一页 ",
"sNext": " 下一页 ",
"sLast": " 最后一页 "
}
}
Ini adalah bahagian asas jadual data. Agak mudah untuk dikuasai.
Saya harap artikel ini akan membantu pembelajaran semua orang tentang pengaturcaraan jQuery.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1389
52
Langkah-langkah melaraskan format gambar yang disisipkan dalam jadual PPT
Mar 26, 2024 pm 04:16 PM
1. Buat fail PPT baharu dan namakannya [Petua PPT] sebagai contoh. 2. Klik dua kali [Petua PPT] untuk membuka fail PPT. 3. Masukkan jadual dengan dua baris dan dua lajur sebagai contoh. 4. Klik dua kali pada sempadan jadual, dan pilihan [Reka Bentuk] akan muncul pada bar alat atas. 5. Klik pilihan [Shading] dan klik [Picture]. 6. Klik [Gambar] untuk muncul kotak dialog pilihan isi dengan gambar sebagai latar belakang. 7. Cari dulang yang anda ingin masukkan dalam direktori dan klik OK untuk memasukkan gambar. 8. Klik kanan pada kotak jadual untuk memaparkan kotak dialog tetapan. 9. Klik [Format Cells] dan semak [Imej jubin sebagai teduhan]. 10. Tetapkan [Pusat], [Mirror] dan fungsi lain yang anda perlukan, dan klik OK. Nota: Lalai adalah untuk gambar diisi dalam jadual
Cara membuat jadual untuk ramalan jualan
Mar 20, 2024 pm 03:06 PM
Mampu membuat borang dengan mahir bukan sahaja kemahiran yang diperlukan untuk perakaunan, sumber manusia dan kewangan Bagi kebanyakan kakitangan jualan, belajar membuat borang juga sangat penting. Kerana data yang berkaitan dengan jualan adalah sangat besar dan kompleks, dan ia tidak boleh direkodkan dalam dokumen untuk menjelaskan masalah tersebut. Untuk membolehkan lebih ramai kakitangan jualan mahir menggunakan Excel untuk membuat jadual, editor akan memperkenalkan isu pembuatan jadual mengenai ramalan jualan Rakan yang memerlukan tidak boleh ketinggalan! 1. Buka [Ramalan Jualan dan Tetapan Sasaran], xlsm, untuk menganalisis data yang disimpan dalam setiap jadual. 2. Buat [Lembaran Kerja Kosong] baharu, pilih [Sel], dan masukkan [Maklumat Label]. [Seret] ke bawah dan [Isi] bulan. Masukkan data [Lain-lain] dan klik [
Bagaimana untuk menetapkan nilai WPS untuk menukar warna secara automatik mengikut syarat_Langkah untuk menetapkan nilai jadual WPS untuk menukar warna secara automatik mengikut keadaan
Mar 27, 2024 pm 07:30 PM
1. Buka lembaran kerja dan cari butang [Start]-[Conditional Formatting]. 2. Klik Pemilihan Lajur dan pilih lajur yang mana pemformatan bersyarat akan ditambahkan. 3. Klik butang [Pemformatan Bersyarat] untuk memaparkan menu pilihan. 4. Pilih [Serlahkan peraturan bersyarat]-[Antara]. 5. Isikan peraturan: 20, 24, teks hijau tua dengan warna isian gelap. 6. Selepas pengesahan, data dalam lajur yang dipilih akan diwarnakan dengan nombor, teks dan kotak sel yang sepadan mengikut tetapan. 7. Peraturan bersyarat tanpa konflik boleh ditambah berulang kali, tetapi untuk peraturan bercanggah WPS akan menggantikan peraturan bersyarat yang ditetapkan sebelum ini dengan peraturan tambahan terakhir. 8. Tambah lajur sel berulang kali selepas [Antara] peraturan 20-24 dan [Kurang daripada] 20. 9. Jika anda perlu menukar peraturan, anda boleh mengosongkan peraturan dan kemudian menetapkan semula peraturan.
Apakah direktori pemasangan sambungan pemalam Chrome?
Mar 08, 2024 am 08:55 AM
Apakah direktori pemasangan sambungan pemalam Chrome? Dalam keadaan biasa, direktori pemasangan lalai pelanjutan pemalam Chrome adalah seperti berikut: 1. Lokasi direktori pemasangan lalai pemalam chrome dalam windowsxp: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\ Default\Extensions2 chrome dalam windows7 Lokasi direktori pemasangan lalai pemalam: C:\Users\username\AppData\Local\Google\Chrome\User.
Kongsi tiga penyelesaian mengapa pelayar Edge tidak menyokong pemalam ini
Mar 13, 2024 pm 04:34 PM
Apabila pengguna menggunakan penyemak imbas Edge, mereka mungkin menambahkan beberapa pemalam untuk memenuhi lebih banyak keperluan mereka. Tetapi apabila menambah pemalam, ia menunjukkan bahawa pemalam ini tidak disokong. Bagaimana untuk menyelesaikan masalah ini? Hari ini, editor akan berkongsi dengan anda tiga penyelesaian. Kaedah 1: Cuba gunakan pelayar lain. Kaedah 2: Flash Player pada penyemak imbas mungkin sudah lapuk atau tiada, menyebabkan pemalam tidak disokong Anda boleh memuat turun versi terkini dari tapak web rasmi. Kaedah 3: Tekan kekunci "Ctrl+Shift+Delete" pada masa yang sama. Klik "Kosongkan Data" dan buka semula penyemak imbas.
Adakah anda tahu cara menjumlahkan jadual Word?
Mar 21, 2024 pm 01:10 PM
Kadangkala, kita sering menghadapi masalah mengira dalam jadual Word Secara amnya, apabila menghadapi masalah seperti itu, kebanyakan pelajar akan menyalin jadual Word ke Excel untuk pengiraan secara senyap. Adakah terdapat cara cepat untuk mengiranya? Sudah tentu ada, sebenarnya jumlahnya juga boleh dikira dalam Word. Jadi, adakah anda tahu bagaimana untuk melakukannya? Hari ini, mari kita lihat bersama-sama! Tanpa berlengah lagi, rakan-rakan yang memerlukan perlu segera mengumpulnya! Butiran langkah: 1. Mula-mula, kita buka perisian Word pada komputer dan buka dokumen yang perlu diproses. (Seperti yang ditunjukkan dalam gambar) 2. Seterusnya, kami meletakkan kursor pada sel di mana nilai yang dijumlahkan terletak (seperti yang ditunjukkan dalam gambar kemudian, kami klik [Bar Menu);
Bagaimana untuk menukar jadual secara mendatar dan menegak dalam perkataan
Mar 20, 2024 am 09:31 AM
Perisian Word amat diperlukan untuk kami dan perlu digunakan dengan kerap Saya telah belajar cara mengedit jadual menggunakan perisian Word sebelum ini, tetapi jika saya secara tidak sengaja mengedit jadual dalam arah mendatar dan menegak, dan saya tidak mahu membuang masa semula -menciptanya, adakah mungkin untuk menukar arah mendatar dan menegak meja? Jawapannya sudah tentu ya Seterusnya, editor akan memperkenalkan kepada anda secara terperinci cara menukar jadual secara mendatar dan menegak dalam Word. Pertama, kita perlu menukar baris dan lajur jadual Word di bawah. Untuk melakukan ini, kita perlu terlebih dahulu memilih jadual sepenuhnya, kemudian klik kanan dan pilih fungsi salin. Langkah 2: Selepas memilih salinan, kami meminimumkan perkataan, kemudian buka jadual Excel, klik kanan, pilih tampal dan tampalkannya ke dalam Exc
Apakah petua untuk orang baru membuat borang?
Mar 21, 2024 am 09:11 AM
Kami sering membuat dan mengedit jadual dalam excel, tetapi sebagai orang baru yang baru bersentuhan dengan perisian, cara menggunakan excel untuk mencipta jadual bukanlah semudah bagi kami. Di bawah, kami akan menjalankan beberapa latihan mengenai beberapa langkah penciptaan meja yang perlu dikuasai oleh pemula, iaitu pemula, Kami berharap ia akan membantu mereka yang memerlukan. Contoh borang untuk pemula ditunjukkan di bawah: Mari lihat cara melengkapkannya! 1. Terdapat dua kaedah untuk mencipta dokumen excel baharu. Anda boleh klik kanan tetikus pada lokasi kosong pada fail [Desktop] - [Baru] - [xls]. Anda juga boleh [Mula]-[Semua Program]-[Microsoft Office]-[Microsoft Excel 20**] 2. Dwiklik bekas baharu kami
