Question

我想要replicate the following code in DataTables example。它的作用就是显示每列的下拉列表。这些下拉列表可以在表格底部看到。

但是对于我的情况，我不想使用HTML表，而是想传递JS数组。这是代码

＆＃13;

var dataSet = [
  ["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"],
  ["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000"],
  ["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575"],
  ["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650"],
  ["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850"],
  ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000"],
  ["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000"],
  ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050"],
  ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"]
];


$(document).ready(function() {
    $('#example').DataTable( {
        data: dataSet,
        columns: [{title: "Name"}, 
                  {title: "Position"}, 
                  {title: "Office"}, 
                  {title: "Extn."}, 
                  {title: "Start date"}, 
                  {title: "Salary"}],
        
        // This function doesn't work as expected.
        // It should create the drop down list for every column
        // see DT link given earlier.
        initComplete: function (setting, json) {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        } 
        
    } );
} );

＆＃13;

<link href="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.js"></script>

<table id="example" class="display" width="100%">

＆＃13;

请注意，当您运行代码段时，initComplete下的功能无效。最后的结果我希望它能显示如下的下拉列表：

该怎么办？

Answer 1

如果要向页脚添加数据，则至少需要一个页脚

在您的代码中[HttpPost, ActionName("Delete")] [ValidateAntiForgeryToken] public ActionResult DeleteConfirmed(int id) { Order order = db.Orders.Find(id); var query = from ord in db.OrderItems where ord.OrderItemID == id select ord; // supposed to get the orderitem based on the OrderID foreach (OrderItem ord in query) { var item = from o in db.Items where o.ItemID == orderItem.ItemID select ord; // supposed to get the item linked to that specific orderitem foreach (Item o in item) { o.Consumption = o.Consumption - orderItem.Quantity; //restores the consumption (aka how much stock was used) o.Quantity = o.Quantity + orderItem.Quantity; //restores the quantity by adding back items that were taken out } } db.Orders.Remove(order); db.SaveChanges(); return RedirectToAction("Index"); }不返回任何内容，以便创建$(column.footer())但从未添加到dom中

select

如果您不想手动添加页脚结构，可以使用下面JS代码的第一部分来创建页脚

<table id="example" class="display" width="100%">
    <tfoot>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </tfoot>
</table>

$(document).ready(function() {

    var columns = [
        {title: "Name"}, 
        {title: "Position"}, 
        {title: "Office"}, 
        {title: "Extn."}, 
        {title: "Start date"}, 
        {title: "Salary"}
    ];

    // Footer construction
    var $tfoot = $("#example tfoot tr");
    for (var i = 0, len = columns.length; i < len ; i++){
        $tfoot.append("<th>");
    }
    
    $('#example').DataTable( {
        data: dataSet,
        columns: columns,
        initComplete: function (setting, json) {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        } 
        
    } );
} );

var dataSet = [
  ["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"],
  ["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000"],
  ["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575"],
  ["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650"],
  ["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850"],
  ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000"],
  ["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000"],
  ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050"],
  ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"]
];

如何将JavaScript数组传递给DataTable（）中的函数

1 个答案: