如何使用datatables服务器处理格式化/自定义表格列中的数据?

6
问题很直白。使用datatables服务器处理的基本初始化时,页面上只显示纯文本。相反,它将数据库列中的内容精确地提取到表格列中,没有任何额外的HTML格式。
例如:这是HTMLCSS格式文本看起来像的图片 - http://i.imgur.com/li2UMI7.png。表格的每一列都有自己的样式/格式。现在,当datatables服务器处理向服务器/数据库发出请求时,结果就像我说的那样,与数据库中的内容完全相同。因此,为了获得如上所示的格式,我必须将HTML放在数据库中。 例如:
<span class="label label-danger">Tag</span>

或者
<span class="label bg-color-greenDark">Category Label</span>

我该如何将从数据库中检索到的结果格式化并放入页面表格列中?我想仅在标签列中放置TAG,而不是完整的HTML标签及其内容。

是否有一种方法可以在结果到达页面之前拦截它们、格式化它们,然后再发布到页面上?

代码:

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "scripts/server_processing.php",

          "columnDefs": [ {
            "data": "firstname", //this name should exist in you response JSON
            "render": function ( data, type, full, meta ) {
              return '<span class="label label-danger">'+data+'</span>';
            }
          } ]

    } );
} );

在你的代码中,你的表应该有 id="example",并且只有1列,对吗? - Castro Roy
1个回答

11

在列中使用render选项,就像这样:

$('#example').dataTable( {
  "columnDefs": [ {
    "targets": 0,//index of column starting from 0
    "data": "column_name", //this name should exist in your JSON response
    "render": function ( data, type, full, meta ) {
      return '<span class="label label-danger">'+data+'</span>';
    }
  } ]
} );

在这里查看文档:DataTables columns.render
使用 data 来匹配源对象/数组的属性/键。 阅读文档
如果您没有使用任何键,请使用 targets阅读文档


您的回答绝对是正确的。感谢您的快速回复。 - user3870816
这只是一个例子,这不应该与您的代码一起使用。 您需要修改“data”,它可以是数据库中列的相同名称,只要它存在于您从服务器接收到的响应JSON或初始数据中即可。 发布您的初始数据和“js”代码示例,我会帮助您。 - Castro Roy
我在主问题正文中更新了代码。至于初始数据,我不确定您的意思。也不确定我理解响应的位置。在开发者工具中,JSON响应如下:{"draw":1,"recordsTotal":300,"recordsFiltered":300,"data":[["Alleen Hieb","Alleen Hieb","5148"],["Alleen Hieb","Alleen Hieb","5198"],["Alleen Hieb","Alleen Hieb","5048"],["Alleen Hieb","Alleen Hieb","5248"],["Alleen Hieb","Alleen Hieb","5098"] 感谢您的帮助! - user3870816
如果您从服务器获取到这个,那么您不能使用 data,请改用 targets。我已经更新了我的答案。 - Castro Roy
你还在吗?我似乎无法让它起作用。它正在工作,但不是很正常。我得到了一个未定义的结果。 - user3870816
显示剩余3条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接