jQuery Datatables表头不对齐的解决办法

2024-08-15 20:39:26

我们用Datatables经常会遇到这种情况，就是浏览器或者HTML里元素改变大小或分辨率后，标题就会出现不对齐现象。这种情况是因为Datatables框架中使用到serverSide : true,// 服务器查询数据属性，它会使Table标签中多一个style="width:**px;"属性，这就导致了变化大小时标题对不齐现象。

<table id="example" class="table table-border table-bordered table-bg table-hover table-sort">
 <thead>
  <tr class="text-c">
   <th width="25">
    <input type="checkbox" name="checkAll" class="checkall" onclick="checkedClean();">
   </th>
   <th width="100">名称</th>
   <th width="100">说明</th>
   <th width="100">类型</th>
   <th width="60">是否默认</th>
   <th width="20">状态</th>
   <th width="100"></th>
 </thead>
 <tbody>
 </tbody>
</table>

解决方法

#example{
 width: 100% !important;
}

如果遇到设有横向滚动条时，就固定设置Table宽度

#example{
 width: ***px !important;
}

收工，这样就完美解决了！！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jquery+php实现导出datatables插件数据到excel的方法

本文实例讲述了jquery+php实现导出datatables插件数据到excel的方法.分享给大家供大家参考.具体如下: DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格.主要特点: 1. 自动分页处理 2. 即时表格数据过滤 3. 数据排序以及数据类型自动检测 4. 自动处理列宽度 5. 可通过CSS定制样式 6. 支持隐藏列 7. 易用 8. 可扩展性和灵活性 9. 国际化 10.动态创建表格 11.
利用JQuery实现datatables插件的增加和删除行功能

在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>zengjia he shancu </title> <meta charset="utf-8" /> <script src=&quo
jQuery.datatables.js插件用法及api实例详解

1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/Zero-configuration.html 2.DataTables的一些基础属性配置 "bPaginate": true, //翻页功能 "bLengthChange": true, //改变每页显示数据数量 "
jQuery表格插件datatables用法汇总

DataTables是一个jQuery的表格插件,本文为大家分享了表格插件datatables用法,介绍了基础的部分知识,具体内容如下一.初始化在页面中 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css&
jQuery中Datatables增加跳转到指定页功能

下面一段代码是关于datatable增加跳转到指定页功能,具体代码如下所示: var mytable = $('#datatables'); mytable.dataTable( { "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", "sPaginationType"
jQuery表格插件datatables用法总结

DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格. 官方网站及其下载地址:http:/www.datatables.net 当前最新版为1.10.2,读者可点此本站下载. 其主要特点如下: 1.自动分页处理 2.即时表格数据过滤 3.数据排序以及数据类型自动检测 4.自动处理列宽度 5.可通过CSS定制样式 6.支持隐藏列 7.易用 8.可扩展性和灵活性 9.国际化 10.动态创建表格 11.免费的使用方
jQuery插件dataTables添加序号列的方法

官网方法实例: $(document).ready(function() { var t = $('#example').DataTable({ "columnDefs": [{ "searchable": false, "orderable": false, "targets": 0 }], "order": [[1, 'asc']] }); t.on('order.dt search.dt', func
jQuery表格插件datatables用法详解

一.Datatables简介 DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格.主要特点: 自动分页处理即时表格数据过滤数据排序以及数据类型自动检测自动处理列宽度可通过CSS定制样式支持隐藏列易用可扩展性和灵活性国际化动态创建表格免费的二.如何使用在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTables插件来帮助我
jquery表格datatables实例解析直接加载和延迟加载

参考自官方文档,需要引入jquery.js,jquery.dataTables.js,dataTables.bootstrap.js(可选), 由于时间紧,省略了很多,所以总结份简化版的仅供参考. 1.直接加载,这个比较简单,如下 <div id="tid" class="col-sm-12 col-md-12"> <div id="secondtid" hidden="hidden"></div
jQuery DataTables插件自定义Ajax分页实例解析

一.问题描述园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果. 后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数据条数(pageSize),显示相应页的显示记录,且不能修改后端接口. 二.分析先来分析下分页实现. 一是后端分页:这种情况下,在后端很容易实现,在官网上有示例,不多说明. 二是前端分页:前端分页也是支持的,不过需要一次把所有数据都获取到才可以. 看到这里,问题来了.由于后端在目前的情况下是更改不

jQuery Datatables表头不对齐的解决办法

相关推荐

随机推荐