Question

在数据表中需要一个搜索框图标...

$('#idt-table').DataTable( {
    "oLanguage": { "Search": '<i class="icon-search"></i>' },
    "responsive": true,
    "scrollY": "260px",
    "scrollCollapse": true
});

Answer 1

一点点的CSS和一些使用SVG的人应该在这里工作（并且快速提示：查找（在本页顶部））：

background-image: url('data:image/svg+xml;utf8,<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" id="spyglass" viewBox="0 0 22 22" height="22" width="22"><path d="m 10.011718,5.0898489 c -2.7000005,0 -4.9003915,2.2004 -4.9003915,4.9003996 0,2.6999995 2.200391,4.8983995 4.9003915,4.8983995 1.154374,0 2.204251,-0.4184 3.042969,-1.0898 l 3.207031,3.1113 0.626953,-0.6465 -3.185547,-3.0879 c 0.743242,-0.8594 1.208984,-1.964 1.208984,-3.1854995 0,-2.6999996 -2.20039,-4.9003996 -4.90039,-4.9003996 z m 0,1 c 2.2,0 3.90039,1.7004 3.90039,3.9003996 0,2.1999995 -1.70039,3.8983995 -3.90039,3.8983995 -2.2000005,0 -3.9003915,-1.6984 -3.9003915,-3.8983995 0,-2.1999996 1.700391,-3.9003996 3.9003915,-3.9003996 z" style="fill:#808080"/></svg>');

在此工作：https://jsfiddle.net/annoyingmouse/qd4w6a5o/

基本上，您将输入的背景图像设置为base64编码的SVG图像（尽管您可以使用不同的图像格式）。通过使用Inkscape，您可以轻松地更改图像。只需将数据网址复制到浏览器的地址并打开即可。下载并编辑到您的内容，然后使用http://b64.io/再次转换为数据网址...

或者您可以像这样嵌入SVG：

{{1}}

（我不知道你现在可以嵌入SVG。）

Answer 2

您好，您可以将搜索图标添加到数据表的过滤器中：

#{your-id}_filter .form-control {
    background: url(../images/xxx.svg);    
    background-repeat: no-repeat;
    background-position: 0px 3px !important;
}

Answer 3

以下是与您的使用需求类型相同的微调器示例。 *请注意在单引号内使用双引号，反之亦然：

processing: "<i class='fa fa-spinner fa-spin' style='font-size:24px; color: #34495e;'></i>"

如何在Datatables的搜索框中添加图标

3 个答案: