css 从jquery设计数据表元素的样式

p8h8hvxi  于 2022-12-15  发布在  jQuery
关注(0)|答案(1)|浏览(97)

我想在datatable中设置搜索栏和分页的样式,如何实现?enter image description here
我试过检查网站,并获得ID和类,并根据更改,但这不是那么可行和灵活
我想更改显示条目中的选项,该怎么做?如何删除文本搜索,如何在搜索中放置占位符?如何更改分页中的背景色?

3df52oht

3df52oht1#

下面是一个示例,其中包含了DataTable的可自定义选项/设置。在这个示例中,我使用的是Bootstrap 3模板和DataTables 1.10,因此如果您使用其他模板,可能需要根据您的用例对其进行一些调整。
请注意,给定的示例已经过充分优化,可以响应--运行StackOverflow的代码片段,除非设置为全屏,或者缩小一点,否则会显示一个有点破损的CSS。
如果您希望进行实验,可以使用fiddle is available here
与您的问题相关的关键部分:

language: {
        "search": "",
        searchPlaceholder: "Search...",

language设置中,只需将Search标签的文本值设置为"",即可删除该标签。
同样在language设置中,你可以设置和自定义搜索过滤器的占位符文本,在我给出的例子中,它被设置为 *Search... *。
当涉及到每页显示的行数时,需要注意以下选项:

lengthMenu: [10, 15, 20, 25, 50, 100],
iDisplayLength: 10,

lengthMenu设置/选项负责您在下拉列表中看到的内容。您可以通过这种方式设置选项的数量及其值。
iDisplayLengthDataTable初始化/第一次显示时显示的行数,如果愿意,甚至可以将其设置为下拉列表中没有的值,不过我建议不要这样做。
关于表头的颜色--你可以简单地在CSS中改变它们(我假设你在初始化DataTable的页面上只有一个表)

th {
  background-color: purple;
  color: white;
}

请务必阅读其他DataTable选项旁边的注解,并像往常一样,务必查看官方站点及其问答部分。
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

相关问题