首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JQuery DataTables.net自定义列宽在ajax加载后不起作用

JQuery DataTables.net是一个流行的前端插件,用于在网页中展示和操作表格数据。它提供了丰富的功能和灵活的配置选项,可以轻松地实现表格的排序、分页、搜索等功能。

在使用JQuery DataTables.net时,有时我们需要自定义表格的列宽。但是在使用ajax加载数据后,自定义列宽可能不起作用。这是因为在ajax加载数据后,表格的列宽会被重新计算和调整,覆盖了我们自定义的设置。

解决这个问题的方法是在数据加载完成后,重新设置表格的列宽。可以通过在ajax请求的回调函数中添加以下代码来实现:

代码语言:txt
复制
$('#example').DataTable({
    "ajax": {
        "url": "data.json",
        "dataSrc": ""
    },
    "columns": [
        { "data": "id", "width": "10%" },
        { "data": "name", "width": "30%" },
        { "data": "age", "width": "20%" },
        { "data": "address", "width": "40%" }
    ],
    "initComplete": function () {
        // 数据加载完成后重新设置列宽
        this.api().columns.adjust();
    }
});

在上述代码中,我们通过columns选项设置了每列的数据源和自定义的列宽。在initComplete回调函数中,使用columns.adjust()方法重新调整列宽,确保自定义的列宽生效。

推荐的腾讯云相关产品:腾讯云对象存储(COS)是一种高扩展性、低成本的云端对象存储服务,适用于存储和处理任意类型的文件,包括文本、图片、音视频等。您可以使用腾讯云对象存储来存储和管理您的静态资源文件,如网页中使用的图片、样式表和JavaScript文件等。了解更多关于腾讯云对象存储的信息,请访问腾讯云对象存储产品介绍

注意:以上答案仅供参考,具体的解决方案可能因实际情况而异。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

报表系统练手(2) -- DataTables的使用(1)

不管选择哪种主题 jQuery.datatables.js 这个文件是不可缺少的。 当前应用中选择 Bootstrap 3主题。 官网: https://datatables.net/ 1.2....表格的细节设置 关于表格展现风格参考 https://datatables.net/examples/styling/index.html 1.2.1 最基本样式: 1.2.2 全部设置 基本表格呈现方式可设置以下几种...-- http://cdn.bootcss.com/jquery/3.2.1/jquery.js jquery.dataTables -- http://cdn.bootcss.com/datatables...例如: 4.3 AJAX资源 此处暂时不做介绍 五、表格参数设置 processing : false,//是否显示加载中提示 autoWidth : false,//是否自动计算表格各宽度...false,//是否显示页数信息 searching : false,//是否显示搜索框 sort : false,//是否允许排序 stateSave : false,//页面重载保持当前页

1.3K10
  • dataTables 使用ajax 和服务器处理 获取数据

    datatables datatables Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。...官网:https://datatables.net/ 中文网:https://datatables.club/ 使用datatables 使用这个很简单,只需要引入两个静态文件 <script src=...(); } ); ajax 获取数据 记录一下通过ajax 获取数据实现表格 通过ajax 可以通过对象数据 和数组数据 来着实现 通过对象数据 你的对象数据格式应该是这样的,对象数据格式就是json格式的...默认获取的是data下面的数据,可以在请求的时候设置dataSrc自定义数据属性名 { "data":[ { "name": "Tiger Nixon",..."recordsTotal":int //即没有过滤的记录数 "recordsFiltered":int //过滤的记录数 "data":array // 要返回的实际数据 这里和 上面的json一样

    5.1K32

    DjangoWeb使用Datatable进行后端分页的实现

    使用场景:不使用Django的模版语言进行分页(网上大多数都使用该方式),使用Jquery DataTable.js 插件进行分页处理。...故使用Ajax定时刷新获取最新数据,两种方案各有优劣,根据实际场景进行抉择。...sAjaxSource: urlParam, //请求资源路径 serverSide: true, //开启服务器处理模式 /* 使用ajax服务端处理数据 sSource...,第1是隐藏内容,第2是行序号,第3check(用来多选的), 第4,6,7,8是要显示的信息,第5是超链接。...但是使用了get方式某页进行操作再进行上面的JS刷新时会出现行序号紊乱或者分页信息被重置的问题。 这也是我碰到的一个坑。 特此记录一下。

    5K20

    jquery.datatables 分页功能

    官网链接:https://datatables.net/manual/server-side 有时候,从DOM读取数据的时间太慢或笨拙,特别是处理数千或数百万的数据行时。...columns[i] - 定义表中所有的数组。 在这两种情况下,i都是一个整数,它将改变以指示数组值。大多数现代化的服务器端脚本环境中,这些数据将作为数组自动提供给您。...recordsTotal -- int // 过滤前的总记录(即数据库中的记录总数) recordsFiltered -- int // 过滤的总记录(即应用过滤的记录总数)不仅仅是该数据页面返回的记录数...在上面的例子中,我们使用它作为一个字符串,它指示DataTables使用其默认设置进行Ajax请求。但是,您可以通过ajax作为对象传入来自定义这些设置。...作为一个对象,ajax直接映射到jQueryajax配置对象,所以任何可以jQuery请求中使用的选项,你也可以使用DataTables!

    5K20

    从零开始学 Web 系列教程

    从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件 jQuery 的概念 jQuery 的顶级对象 jQuery 对象和 DOM 对象互转 页面加载事件 从零开始学 Web 之...动画相关方法 从零开始学 Web 之 jQuery(四)元素的创建添加与删除,自定义属性 元素的创建、添加和删除 元素 value 属性的操作 自定义属性 从零开始学 Web 之 jQuery(五)操作元素其他属性...jQuery(八)each,多库共存,包装集,插件 each 方法 多库共存 包装集 几个元素的高属性 插件 从零开始学 Web 之 Ajax 从零开始学 Web 之 Ajax(一)服务器相关概念 服务器和客户端...Web 之 Ajax(五)同步异步请求,数据格式 同步请求和异步请求 数据格式(XML、JSON) 从零开始学 Web 之 Ajax(六)jQuery中的Ajax 从零开始学 Web 之 Ajax(七...CSS3(四)边框图片,过渡 从零开始学 Web 之 CSS3(五)transform 从零开始学 Web 之 CSS3(六)动画animation,Web字体 从零开始学 Web 之 CSS3(七)多布局

    4.7K50

    Ajax第三节

    根据父容器, 子容器的以及数, 计算间隔 (space) 间隔: (父容器 - 子容器 * 数) / (数 - 1); * 4....因此需要从通过ajax获取图片 2. 使用模版引擎将获取到的数据渲染到页面 3. 因为图片路径是从服务端获取的,加载需要时间, 渲染时需要设置高 4....点击加载更多, 请求下一页数据, 注意: 加载时,显示"正在加载中...",并且要求不能重复发送ajax请求 5. 给window注册scroll事件,当触底时,需要动态的加载图片。...(规定: 最后一张图片开始显示屏幕中时, 加载图片) 6. 当服务端返回图片数量为0时,提示用户没有更多数据。...AJAX 请求浏览器端有跨域限制 虽然这些限制是很有必要的,但是也给我们日常开发带来不好的影响。

    1.4K20

    datatables应用程序接口API

    实例(如果是这个方式初始化Datatables,那么返回的对象不能使用api方法,不然会报方法未定义) 核心(Core) 名称 说明 ajax.reload()API 重新加载数据源获取数据(不能指定新的数据源...) ajax.url().load()API 设置新的url数据源重新加载数据 ajax.url()API 设置新的url数据源 draw()API 重绘表格 $()API 整个表格里执行(完成)一个...jQuery 选择器操作 ajax.json()API 获得最终的json数据 ajax.params()API 获取最后一次Ajax请求提交的参数 ajaxAPI ajax方法的命名空间 clear...()DT 得到隐藏或者设置隐藏 columns()DT 从表格选择多 columns.adjust()DT 重新计算 行(Rows) 名称 说明 row().cache()DT 获取缓存里行的数据...遍历表格、,行,单元格结果集 join()DT 给结果集数据以字符连接然后返回一个字符串 lastIndexOf()DT 返回与字符相匹配第一次出现的位置(从往前) lengthDT 返回结果集的长度

    4.4K30

    ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView

    nugget 包安装成功,我们需要在视图中引入 jQuery DataTables 的必要的 JS 和 CSS,为此,我们需要注册 jQuery DataTables,请打开位于 App_Start...现在我们必须升级 jQuery 数据表初始化,以便它能够用过服务器端的 ajaxing 来加载数据。...,然后检查所有中是否符合标准的数据都返回了。...在这之后,我们就实现了排序逻辑,排序列的信息附带在使用自定义模型绑定的模型中,使用 System.Linq.Dynamic 我们能够避免 if 和 switch 语句,我们将迭代在用户请求的排序上,并且通过以下代码排列行...服务器端实现表格的过滤、分页和排序等功能,能够减少客户端数据处理的任务量,方便更好更快的加载并显示数据。

    5.4K80

    Datatables表格插件,你用过吗?

    分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation...: {//进行ajax请求 url: 'ajax.php', type: 'get' }, //显示每...}); 有些人喜欢自定义搜索隐藏自带搜索和自定义下拉分页书数,lengthMenu属性可以自定义下拉分页数,而searching属性可以控制是否用自带的搜索。...ajax请求中利用data属性动态实时获取用户输入的数据,并把其赋值给dataTable,然后doSearch方法中重新拉起一次dataTable请求,这时请求参数就添加了需要的字段和值; <form...第一种实现方法是前端处理, createdRow:function (row, data, dataIndex) {}回调方法中获取到当前所在行的最后一,然后把html添加进去。

    6K30
    领券