Question

我正在尝试让DataTables从AJAX数据源中读取列名，但似乎必须有一些我必须在这里丢失的内容。

我制作了一个小提琴fiddle，我可以在其中手动定义表格使用的数据和列。

该表在HTML中声明，无需定义列名（<thead>..</thead>）：

<table id="example" class="display table table-striped table-bordered" 
       cellspacing="0" width="100%"></table>

在JS中我们手动定义数据：

var data = [
    [ "Row 1 - Field 1", "Row 1 - Field 2", "Row 1 - Field 3" ],
    [ "Row 2 - Field 1", "Row 2 - Field 2", "Row 2 - Field 3" ],
];

然后手动定义列名称或标题：

var columns = [
    { "title":"One" },
    { "title":"Two" }, 
    { "title":"Three" }
];

然后，当我们初始化表时，我们只是将以前声明的信息传递给DataTables使用：

$(document).ready(function() {
  $('#example').DataTable( {
    dom: "Bfrtip",
    data: data,
    columns: columns
  });
});

结果是：

现在我的问题是，如果数据包含在AJAX server side response中，我将如何才能实现这一目标？

我已经以各种方式和形式尝试了这一点，但似乎没有什么似乎在这里工作，我正在努力寻找相关的文件。

例如，如果服务器端处理发回了一个JSON响应，其中包含最后的列名：

{
  "data": [
    {
      "id": "1",
      "One": "Row 1 - Field 1",
      "Two": "Row 1 - Field 2",
      "Three": "Row 1 - Field 3"
    },
    {
      "id": "2",
      "One": "Row 2 - Field 1",
      "Two": "Row 2 - Field 2",
      "Three": "Row 2 - Field 3"
    }
  ],
  "options": [],
  "files": [],
  "columns": [
    {
      "title": "One",
      "data": "One"
    },
    {

      "title": "Two",
      "data": "Two"
    },
    {
      "title": "Three",
      "data": "Three"
    }
  ]
}

鉴于这是响应，我尝试将DataTables配置为使用AJAX数据源获取行信息，如下所示：

$(document).ready(function() {
  $('#example').DataTable( {
    dom: "Bfrtip",
    "ajax": '/test.php',
    columns: columns
  });
});

但显然columns在这里未定义。

所以我事先得到了列数据：

function getPromise() {
  var deferred = $.Deferred();
  var dataUrl = document.location.origin+'/text.php';
  $.getJSON(dataUrl, function(jsondata) {
    setTimeout(function() {
      deferred.resolve(jsondata);
    }, 0);
  }).fail(function( jqxhr, textStatus, error ) {
    // ********* FAILED
    var err = textStatus + ", " + error;
    console.log( "Request Failed: " + err );
  });
  return deferred.promise();
}
// Get the columns
getPromise().done(function(jsondata) {
  columns = jsondata.columns;
  console.log(columns);
});

并将其传递给DataTables，如上所述。但是这次我在运行示例时得到的是控制台中的错误TypeError: p is undefined。

那么我怎样才能利用在服务器端响应中返回的动态生成的列？有没有更简单的方法来实现这一目标？

编辑：

DataTables用于服务器端处理的编辑器代码/用于生成上述JSON响应：

<?php
// DataTables PHP library
require_once '/path/to/DataTables.php';

// Alias Editor classes so they are easy to use
use
  DataTables\Editor,
  DataTables\Editor\Field,
  DataTables\Editor\Format,
  DataTables\Editor\Mjoin,
  DataTables\Editor\Upload,
  DataTables\Editor\Validate;

// Build our Editor instance and process the data coming from _POST
$out = Editor::inst( $db, 'example' )
  ->fields(
    Field::inst( 'id' )->set(false),
    Field::inst( '`One`' )->validator( 'Validate::notEmpty' ),
    Field::inst( '`Two`' )->validator( 'Validate::notEmpty' ),
    Field::inst( '`Three`' )->validator( 'Validate::notEmpty' )
  )
  ->process( $_POST )
  ->data();

// On 'read' remove the DT_RowId property so we can see fully how the `idSrc`
// option works on the client-side.
if ( Editor::action( $_POST ) === Editor::ACTION_READ ) {
    for ( $i=0, $ien=count($out['data']) ; $i<$ien ; $i++ ) {
        unset( $out['data'][$i]['DT_RowId'] );
    }
}

// Create the thead data
if (count ($out) > 0) {
  $columns = array();
  foreach ($out['data'][0] as $column=>$relativeValue) {
    // Add all but the id value
    if ($column !== 'id') {
      // Add this column name
      $columns[] = array(
        "title"=>$column,
        "data"=>$column
      );
    }
  }
}
// Add the the thead data to the ajax response
$out['columns'] = $columns;
// Send the data back to the client
echo json_encode( $out );

Answer 1

如果您不使用内置的DataTables ajax，根据您的数据结构应该很容易：

$(document).ready(function() {
    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: '/echo/json/',
        data: {
            json: JSON.stringify(jsonData)
        },
        success: function(d) {
            $('#example').DataTable({
                dom: "Bfrtip",
                data: d.data,
                columns: d.columns
            });
        }
    });
});

与this JSFiddle一样，您只能立即加载所有数据，但这不应该是一个大问题......除非您更改它，否则请从初始ajax调用中获取列一旦DataTable启动，然后添加内置的ajax - 我没试过这个......

Answer 2

您必须使用不带标题的html创建表

<table id="tablaListadoExpediciones" class="table table-bordered table-striped  dt-responsive">  </table>

现在，您必须动态生成columns数组。这样，即使AJAX响应随时间变化，列也将始终自动生成。

function PintarTablaDinamicamente(datos) {//object "datos" comes from AJAX response

            //I take the keys of the object as columns of the table
            var arrColumnas = Object.keys(datos[0])

            ////In case you wanted to hide a column
            //var indiceColumna = arrColumnas.indexOf("nameOfTheColumnToHide")
            //if (indiceColumna !== -1) {
            //    arrColumnas.splice(indiceColumna, 1)
            //}

            var columns = []
            //columns must be in JSON format-->{data:'keyToSearchInJSON',title:'columnTitle'}
            for (var i in arrColumnas) {

                //if (arrColumnas[i] == "SELECCIONAR") { //if you want to add a checkbox in one colunm (for example column named SELECT
                //    columns.push({
                //        data: null,
                //        defaultContent: '',
                //        className: 'select-checkbox',
                //        orderable: false
                //    });
                //} else {
                    columns.push({ data: arrColumnas[i], title: arrColumnas[i] });

                //}

            }


           
            tabla = $('#tablaListadoExpediciones').DataTable({
                dom: "Blfrtip",
                data: datos,
                //order: [[0, 'desc']],
                "pageLength": 25,
                "scrollX": true,
                columns: columns
                ,  

                buttons: [
                    {
                        extend: 'copy'
                       
                    },
                    {
                        extend: 'excel'
                       
                    },
                    {
                        extend: 'print'
                        
                    }
                ],

                //select: {
                //    style: 'os',
                //    selector: 'td:first-child'
                //}
            });
        }

DataTables - 来自Ajax数据源的动态列？

2 个答案: