表格可按列筛选排序的分页JS+CSS+DIV资源-CSDN文库

共13个文件

gif：10个

htm：1个

css：1个

5星 · 超过95%的资源需积分: 32 123 浏览量 2010-05-14 16:08:48 上传评论收藏 10KB RAR 举报

在网页开发中，数据展示是不可或缺的一部分，而表格（Table）是常见的数据组织形式。"表格可按列筛选排序的分页 JS+CSS+DIV" 是一个基于 JavaScript、CSS 和 HTML（尤其是 DIV 元素）实现的功能强大的表格组件。这个组件允许用户对表格数据进行动态的列筛选和排序，同时具备分页功能，提高了用户体验和数据管理的效率。 1. **JavaScript（JS）**：JavaScript 是一种脚本语言，主要负责网页的动态交互。在这个组件中，JavaScript 被用来处理用户点击列头时的数据排序和筛选逻辑。它通过监听事件，获取用户的点击行为，然后对表格中的数据进行相应的操作。例如，实现点击某一列时，根据该列值进行升序或降序排序。同时，JavaScript 还可以处理分页逻辑，比如计算每一页的数据量，改变页码时更新显示的数据等。 2. **CSS（Cascading Style Sheets）**：CSS 用于定义网页的样式和布局。在这个组件中，CSS 负责美化表格，设置行、列、边框样式，以及交互状态下的高亮效果。例如，当用户鼠标悬停在列头上时，可以改变其背景色或者添加下划线，以提示用户可以进行排序操作。CSS 还可以用于优化表格在不同屏幕尺寸下的显示，确保其响应式设计。 3. **HTML（Div元素）**：HTML 是超文本标记语言，构建网页的基本结构。DIV 是一种常用的容器元素，可以用来包裹一组内容，便于应用 CSS 样式和组织布局。在这个组件中，每个表格的行和列都可以由 DIV 容器来表示，通过 CSS 控制它们的显示和排列。此外，还可以使用 DIV 来创建分页栏，显示当前页码和总页数，以及提供页码切换的按钮。 4. **分页功能**：分页是处理大量数据的有效手段，可以避免一次性加载过多数据导致页面卡顿。这个组件提供了选择每页显示数据数量的选项，用户可以根据需求调整。分页栏通常包含“上一页”、“下一页”按钮，以及页码选择，用户可以通过这些元素浏览数据的不同部分。 5. **列筛选**：列筛选功能允许用户根据特定条件过滤表格中的数据，只显示符合要求的部分。例如，用户可能希望只查看某列值大于某个值的行。这个组件通过 JavaScript 实现筛选逻辑，用户输入筛选条件后，隐藏不符合条件的行。 “表格可按列筛选排序的分页 JS+CSS+DIV”是一个结合了前端技术的实用工具，实现了动态交互的表格功能，为网站后台的数据管理提供了便利。通过合理运用 JavaScript、CSS 和 HTML，开发者可以创建出功能强大、用户友好的数据展示界面。在实际开发中，还可以结合现代前端框架如 Vue 或 React 进一步提升性能和易用性。

资源推荐

资源详情

资源评论

收起资源包目录

表格可按列筛选排序的分页.rar （13个子文件）

表格可按列筛选排序的分页

tableimg

asc.gif 46B

bg.gif 381B

last.gif 350B

header-bg.gif 54B

script.js 3KB

sort.gif 52B

previous.gif 304B

desc.gif 46B

next.gif 303B

first.gif 351B

style.css 2KB

header-selected-bg.gif 54B

index.htm 17KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TinyTable</title> <link rel="stylesheet" href="tableimg/style.css" /> </head> <body> <table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable"> <thead> <tr> <th class="nosort"><h3>ID</h3></th> <th><h3>Name</h3></th> <th><h3>Phone</h3></th> <th><h3>Email</h3></th> <th><h3>Zip</h3></th> <th><h3>Birthdate</h3></th> <th><h3>Last Access</h3></th> <th><h3>Rating</h3></th> <th><h3>Done</h3></th> <th><h3>Salary</h3></th> <th><h3>Score</h3></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Ezekiel Hart</td> <td>(627) 536-4760</td> <td><a href="mailto:#">tortor@est.ca</a></td> <td>53082</td> <td>12/02/1962</td> <td>March 26, 2009</td> <td>-7</td> <td>7%</td> <td>$73,229</td> <td>6.9</td> </tr> <tr> <td>2</td> <td>Jaquelyn Pace</td> <td>(921) 943-5780</td> <td><a href="mailto:#">in@elementum.org</a></td> <td>46789</td> <td>06/03/1957</td> <td>October 20, 2006</td> <td>-7</td> <td>33%</td> <td>$130,752</td> <td>4.9</td> </tr> <tr> <td>3</td> <td>Lois Pickett</td> <td>(835) 361-5993</td> <td><a href="mailto:#">arcu.ac@disse.ca</a></td> <td>9814</td> <td>10/15/1983</td> <td>June 01, 1999</td> <td>4</td> <td>44%</td> <td>$48,684</td> <td>5.5</td> </tr> <tr> <td>4</td> <td>Keane Raymond</td> <td>(605) 803-1561</td> <td><a href="mailto:#">at.risus.Nunc@ipsum.com</a></td> <td>97129</td> <td>07/30/1982</td> <td>July 24, 1996</td> <td>5</td> <td>20%</td> <td>$7,023</td> <td>9.5</td> </tr> <tr> <td>5</td> <td>Porter Thomas</td> <td>(666) 569-9894</td> <td><a href="mailto:#">non@Proin.ca</a></td> <td>59953</td> <td>09/27/1986</td> <td>December 05, 2007</td> <td>1</td> <td>66%</td> <td>$69,875</td> <td>0.9</td> </tr> <tr> <td>6</td> <td>Imani Murphy</td> <td>(771) 294-6690</td> <td><a href="mailto:#">Aenean.sed@elit.ca</a></td> <td>69771</td> <td>10/23/1970</td> <td>December 08, 1996</td> <td>-1</td> <td>30%</td> <td>$113,763</td> <td>4.9</td> </tr> <tr> <td>7</td> <td>Zachery Guthrie</td> <td>(851) 784-4129</td> <td><a href="mailto:#">nunc.nulla@vel.com</a></td> <td>66960</td> <td>12/22/1972</td> <td>September 20, 2002</td> <td>-5</td> <td>24%</td> <td>$130,248</td> <td>6.9</td> </tr> <tr> <td>8</td> <td>Harper Bowen</td> <td>(810) 652-6704</td> <td><a href="mailto:#">dis@duinec.ca</a></td> <td>77110</td> <td>10/26/1973</td> <td>May 29, 1996</td> <td>5</td> <td>49%</td> <td>$73,197</td> <td>4.5</td> </tr> <tr> <td>9</td> <td>Caldwell Larson</td> <td>(850) 562-3177</td> <td><a href="mailto:#">elit@dolor.com</a></td> <td>87519</td> <td>07/20/1985</td> <td>June 22, 2004</td> <td>-3</td> <td>81%</td> <td>$63,736</td> <td>7.5</td> </tr> <tr> <td>10</td> <td>Baker Osborn</td> <td>(378) 371-0559</td> <td><a href="mailto:#">turpis.Nulla@ac.edu</a></td> <td>69446</td> <td>03/29/1970</td> <td>July 23, 2005</td> <td>-7</td> <td>61%</td> <td>$2,868</td> <td>0.1</td> </tr> <tr> <td>11</td> <td>Yael Owens</td> <td>(465) 520-1801</td> <td><a href="mailto:#">nunc.ac.mattis@enim.com</a></td> <td>93872</td> <td>08/10/1963</td> <td>April 09, 1997</td> <td>10</td> <td>85%</td> <td>$126,469</td> <td>8.9</td> </tr> <tr> <td>12</td> <td>Fletcher Briggs</td> <td>(992) 962-9419</td> <td><a href="mailto:#">amet.ante@lentesque.edu</a></td> <td>87282</td> <td>08/12/1971</td> <td>December 12, 2006</td> <td>7</td> <td>23%</td> <td>$142,448</td> <td>8.9</td> </tr> <tr> <td>13</td> <td>Maggy Murphy</td> <td>(585) 210-0390</td> <td><a href="mailto:#">eu@Integer.com</a></td> <td>98081</td> <td>07/11/1968</td> <td>April 02, 2007</td> <td>9</td> <td>31%</td> <td>$40,267</td> <td>6.9</td> </tr> <tr> <td>14</td> <td>Maggie Blake</td> <td>(489) 101-5447</td> <td><a href="mailto:#">rutrum.non.hendrerit@iaculis.org</a></td> <td>85131</td> <td>04/11/1970</td> <td>May 24, 2008</td> <td>-2</td> <td>32%</td> <td>$99,686</td> <td>7.9</td> </tr> <tr> <td>15</td> <td>Ginger Bell</td> <td>(934) 692-7294</td> <td><a href="mailto:#">erat.in.conetuer@pedenout.org</a></td> <td>78878</td> <td>06/10/1957</td> <td>April 13, 2003</td> <td>-10</td> <td>74%</td> <td>$112,997</td> <td>4.5</td> </tr> <tr> <td>16</td> <td>Iliana Ballard</td> <td>(806) 835-7035</td> <td><a href="mailto:#">vel.sapien@mi.ca</a></td> <td>84718</td> <td>02/09/1989</td> <td>March 27, 1996</td> <td>-6</td> <td>78%</td> <td>$5,282</td> <td>5.5</td> </tr> <tr> <td>17</td> <td>Alisa Monroe</td> <td>(859) 974-4442</td> <td><a href="mailto:#">adipiscing.ligula@aretraNam.edu</a></td> <td>89057</td> <td>02/14/1990</td> <td>April 30, 2003</td> <td>6</td> <td>95%</td> <td>$103,999</td> <td>5.9</td> </tr> <tr> <td>18</td> <td>Kenyon Luna</td> <td>(673) 147-0443</td> <td><a href="mailto:#">Cras@Vestibulumant.edu</a></td> <td>18035</td> <td>04/14/1981</td> <td>April 17, 2009</td> <td>9</td> <td>14%</td> <td>$37,014</td> <td>7.9</td> </tr> <tr> <td>19</td> <td>Nola Kerr</td> <td>(340) 430-0424</td> <td><a href="mailto:#">tincidunt@vurmagna.com</a></td> <td>93815</td> <td>11/06/1959</td> <td>August 14, 2000</td> <td>10</td> <td>2%</td> <td>$104,149</td> <td>0.5</td> </tr> <tr> <td>20</td> <td>Gail Cash</td> <td>(291) 455-8520</td> <td><a href="mailto:#">massa.rutrum@Nullamlob.ca</a></td> <td>16919</td> <td>09/09/1970</td> <td>April 27, 2002</td> <td>-1</td> <td>84%</td> <td>$31,090</td> <td>1.5</td> </tr> <tr> <td>21</td> <td>Kalia Ayala</td> <td>(142) 520-1128</td> <td><a href="mailto:#">Etiam.laoreet@velit.org</a></td> <td>45675</td> <td>04/25/1971</td> <td>March 30, 2001</td> <td>5</td> <td>30%</td> <td>$44,641</td> <td>5.9</td> </tr> <tr> <td>22</td> <td>Violet Ballard</td> <td>(126) 374-6078</td> <td><a href="mailto:#">Integer.in.magna@ntumcollis.edu</a></td> <td>45791</td> <td>01/23/1984</td> <td>June 08, 2006</td> <td>-10</td> <td>85%</td> <td>$46,450</td> <td>7.9</td> </tr> <tr> <td>23</td> <td>Kevin Carrillo</td> <td>(687) 483-9669</td> <td><a href="mailto:#">in@adipiscing.edu</a></td> <td>27432</td> <td>03/17/1977</td> <td>October 01, 2005</td> <td>-3</td> <td>5%</td> <td>$51,754</td> <td>1.5</td> </tr> <tr> <td>24</td> <td>Alexandra Nixon</td> <td>(422) 644-3488</td> <td><a href="mailto:#">nec.luctus@ornarefacilisis.com</a></td> <td>58955</td> <td>12/01/1981</td> <td>February 25, 2001</td> <td>-1</td> <td>41%</td> <td>$46,672</td> <td>7.

评论收藏

内容反馈