DataTables将列动态添加到表中 [英] DataTables add column dynamically to table

问题描述

我使用DataTables（ datatables.net ）显示来自Ajax源的数据，并且无法自定义它。我想要做的一件事就是添加一个列，这样我就可以为每一行设置一个编辑按钮。

这个例子中最接近的是此处，但我无法使用ajax源代码。

目前，我正在使用下面的代码来显示我的表：

  fnServerObjectToArray = function（aElements）{
返回函数（sSource，aoData，fnCallback）{
 $ .ajax（{
dataType：'json'，
type ：POST，
url：sSource，
data：aoData，
success：function（json）{
 var a = []; $ b （var i = 0，iLen = json.aaData.length; i< iLen; i ++）{
 var inner = []; 
 for（var j = 0，jLen = aElements.length ; j  
 inner.push（json.aaData [i] [aElements [j]]）; 
} 
.push（inner）; 
} 
 json.aaData = a; 
 fnCallback（json）; 
} 
}）; 
 
 
 $ b $（document）.ready（function（）{
 $（'＃example'）。dataTable（{
bProcessing ：true，
sAjaxSource：'get_data.php'，
fnServerData：fnServerObjectToArray（['username'，'email']）
}）; 
} ）; 
  

解决方案

为什么不在aoColumns中使用fnRenderFunction？举例来说：

  aoColumns：[{bVisible：false}，null，null，null，null，
 {sName：ID，
bSearchable：false，
bSortable：false，
fnRender：function（oObj）{
 return<< ; a href ='EditData.php？id =+ oObj.aData [0] +'>编辑< / a>; 
 
 
 
 $ / code $ / pre 
 
您可以使用它来格式化来自服务器端的值。 
 
 
请参阅 http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-inlinebuttons.html （忽略可编辑插件的特定设置）
 
I'm using DataTables (datatables.net) to display data from an Ajax source and having trouble customizing it. One thing I would like to do is add a column so I can have for example an 'edit' button for each row.

The closest thing to that in the examples is here but I can't get that to work with an ajax source.

Currently, I'm using the following code to display my table:
fnServerObjectToArray = function ( aElements ){
    return function ( sSource, aoData, fnCallback ) {
        $.ajax( {
            "dataType": 'json', 
            "type": "POST", 
            "url": sSource, 
            "data": aoData, 
            "success": function (json) {
                var a = [];
                for ( var i=0, iLen=json.aaData.length ; i<iLen ; i++ ) {
                    var inner = [];
                    for ( var j=0, jLen=aElements.length ; j<jLen ; j++ ) {

                        inner.push( json.aaData[i][aElements[j]] );
                    }
                    a.push( inner );
                }
                json.aaData = a;
                fnCallback(json);
            }
        } );
    }
}

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "sAjaxSource": 'get_data.php',
        "fnServerData": fnServerObjectToArray( [ 'username', 'email' ] )
    } );
}); 

解决方案
Why don't you use fnRenderFunction in the aoColumns? As an example:
aoColumns: [ { "bVisible": false} , null, null, null, null,
  { "sName": "ID",
    "bSearchable": false,
    "bSortable": false,
    "fnRender": function (oObj) {
       return "<a href='EditData.php?id=" + oObj.aData[0] + "'>Edit</a>";
     }
  }
]
You can use it to format the value from the server side.

See similar example on the http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-inlinebuttons.html (ignore specific settings for the editable plugin)

                        
这篇关于DataTables将列动态添加到表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！