大佬教程收集整理的这篇文章主要介绍了在jquery中使用固定标头调整表列的大小，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
出于某种原因,我的jsfiddle向我展示了我无法调试的@L_607_9@,但是当在这里尝试使用XAMMp时它完美地工作并呈现分页,列排序和固定标题示例..因为你可以看到初始化代码很短,但是你可能想下载图像的de codebase.我基本上拿了你提供的代码元素并安排它应用DataTables.net jQuery插件.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8">
<title>
TEST DataTables.net plugin - Fixed Header example
</title>
<script src='jquery182.js' ></script>
<script src='jquery.dataTables.js' ></script>
<script src='FixedHeader.js' ></script>
<link rel='stylesheet' href='demo_table.css'/>
<link rel='stylesheet' href='demo_page.css'/>
</head>
<body>
<div id="demo">
<table celLPADding="0" cellspacing="0" border="0" class="display data_Table" >
<thead>
<tr>
<th style='width:47px; height:29px' >
<input name="chkSELEctAll" type="checkBox" value="" id="chkSELEctAll"/></th>
<th style='width:159px;font-weight:bold'>Computer <span class="actdiv"> </span></th>
<th style='width:105px;font-weight:bold'>Group <span class="actdiv"> </span></th>
<th style='width:97px;font-weight:bold'>Policy <span class="actdiv"> </span></th>
<th style='width:105px;font-weight:bold'>Domain <span class="actdiv"> </span></th>
<th style='width:126px;font-weight:bold'>Address<span class="actdiv"> </span></th>
<th style='width:127px;font-weight:bold'>Type <span class="actdiv"> </span></th>
<th style='width:109px;font-weight:bold'>Status <span class="actdiv"> </span></th>
<th style='width:181px;font-weight:bold'>Test Status <span class="actdiv"> </span></th>
<th style='width:165px;font-weight:bold'>Version <span class="actdiv"> </span></th>
<th style='width:131px;font-weight:bold'>Date <span class="actdiv"> </span></th>
<th style='width:160px;font-weight:bold'>Last Date <span class="actdiv"> </span></th>
<th style='width:173px;font-weight:bold'>Count </th>
</tr>
</thead>
<tbody>
<tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkBox" alt="classid-1" class="chkSELEctAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr> </tbody>
</table>
</div>
<script>
jQuery(document).ready(function($){
var oTable = $('.data_Table').dataTable( {
// "sDom": 'RC<"clear">lfrtip'
//options: we are using
"sDom": 'Rlfrtip',"sScrollY": "200px","bPaginate": true //Disable pagination false
} );
});
</script>
</body>
</html>
> JSfiddle链接：[http://jsfiddle.net/Hx7ak/60/][1]
如果您在该jsfiddle的HTML部分获取源代码,并从该jsfiddle链接(javascript和css文件,并将此html放在同一目录中)下载依赖项,它应该让您立即开始使用它.
虽然,根据你可能想要查看的选项,你决定使用这个jQuery插件,请记住它有一个非常活跃的社区和支持,在论坛上,开发人员应该掌握具体细节.
有关DataTables.net的更多信息,请参阅示例部分.
有趣的链接可以帮助您,具体取决于您希望如何使用此插件呈现您的数据：
FixedHeader
> http://www.datatables.net/release-datatables/extras/FixedHeader/two_tables.html
> http://www.datatables.net/release-datatables/extras/FixedHeader/index.html
> http://www.datatables.net/release-datatables/extras/FixedHeader/html_table.html
ColReorder
> http://www.datatables.net/release-datatables/extras/ColReorder/scrolling.html
> http://www.datatables.net/release-datatables/extras/ColReorder/fixedheader.html
> http://www.datatables.net/release-datatables/extras/ColReorder/fixedcolumns.html
科尔维斯(看似有趣)
> http://www.datatables.net/release-datatables/extras/ColVis/index.html
Fixedcolumns
> http://www.datatables.net/release-datatables/extras/FixedColumns/index.html
好吧,你可以在http://www.datatables.net/examples/看到示例列表很长,但希望这有帮助！
这个jQuery插件的预期结果
以上是大佬教程为你收集整理的在jquery中使用固定标头调整表列的大小全部内容，希望文章能够帮你解决在jquery中使用固定标头调整表列的大小所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。