Question

我正在开发一个DataTable，它有按钮来选择每行做什么。但是，按钮根据另一个单元格的字符串值而变化。这是我用来填充表格的代码：

var table = $('#CheckRegisterTable').dataTable({
            'ajax': {
                type: 'POST',
                url: '@Url.Action("GetData", "CheckRegister")',
                //data: function (d) {

                //}
            },
            columns: [
            {
                data:   "select",
                render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return '<input type="checkbox" class="editor-active">';
                    }
                    return data;
                },
                sortable: false,
                className: "text-center"
            },
            {
                data: 'checkNo',
                sortable: true,
                className: "text-center"
            },
            {
                data: 'studentID',
                sortable: true,
                className: "text-center"
            },
            {
                data: 'ssn',
                sortable: true,
                className: "text-center"
            },
            {
                data: 'payee',
                sortable: true,
                className: "text-center"
            },
            {
                data: 'date',
                sortable: true,
                className: "text-center"
            },
            {
                data: 'type',
                sortable: true,
                className: "text-center"
            },
            {
                data: 'amount',
                sortable: true,
                className: "text-right"
            },
            {
                data: 'status',
                sortable: true,
                className: "text-center"
            },
            {
                render: function (data) {
                    var row = table.row($(this).parents('tr')).data();
                    if (row[8] == "Printed") {
                        return '<button><i class="fa-fa-reply"></button><i class="fa-fa-rotate-left"><button><i class="fa-fa-close"></button><button><i class="fa-fa-print"></button><button><i class="fa-fa-info"></button>'
                    }
                    else if (row[8] == "Cleared") {
                        return '<button><i class="fa-fa-info"></button>'
                    }
                    else if (row[8] == "Stopped") {
                        return '<button><i class="fa-fa-rotate-left"></button><button><i class="fa-fa-close"></button><button><i class="fa-fa-info"></button>'
                    }
                    else if (row[8] == "Reissued") {
                        return '<button><i class="fa-fa-reply"></button><button><i class="fa-fa-rotate-left"></button><button><i class="fa-fa-close"></button><button><i class="fa-fa-info"></button>'
                    }
                    else if (row[8] == "Returned") {
                        return '<button><i class="fa-fa-rotate-left"></button><button><i class="fa-fa-info"></button>'
                    }
                    else if (row[8] == "Reissue Pending") {
                        return '<button><i class="fa-fa-rotate-left"></button><button><i class="fa-fa-info"></button>'
                    }
                    else if (row[8] == "Stop Pending") {
                        return '<button><i class="fa-fa-close"></button><button><i class="fa-fa-info"></button>'
                    }

                }

            }
            ],
            ordering: true,
            order: [0, 'Name'],
            processing: true,
            serverSide: true
        });

但是代码给了我错误，我甚至不确定我做得对。查看“状态”列中的值并使用按钮填充其他列的最佳方法是什么？谢谢你的帮助！

编辑：我的查看文件（自原始帖子以来已经编辑过）：

<link href="~/Content/checkRegister.css" rel="stylesheet" type="text/css"/>
@{
    ViewBag.Title = "Check Register";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<br /> <br /><br />
<div class="container-fluid left">
<div class="container-fluid left">
    <table id="CheckRegisterTable" class="table table-striped table-bordered table-hover text-nowrap">
        <thead>
            <tr>
                <th><input type="checkbox" class="editor-active"></th>
                <th data-column="checkNo" class="text-left" id="TDtooltip" data-toggle="tooltip" data-placement="bottom" data-original-title="Check Number" data-container="body">Check Number</th>
                <th data-column="studentID" class="text-left" id="TDtooltip" data-toggle="tooltip" data-placement="bottom" data-original-title="Student ID Number" data-container="body">Student ID</th>
                <th data-column="ssn" class="text-left" id="TDtooltip" data-toggle="tooltip" data-placement="bottom" data-original-title="Social Security Number" data-container="body">SSN</th>
                <th data-column="payee" class="text-left" id="TDtooltip" data-toggle="tooltip" data-placement="bottom" data-original-title="Payee Name" data-container="body">Payee</th>
                <th data-column="date" class="text-left" id="TDtooltip" data-toggle="tooltip" data-placement="bottom" data-original-title="Check Date" data-container="body">Date</th>
                <th data-column="type" class="text-left" id="TDtooltip" data-toggle="tooltip" data-placement="bottom" data-original-title="Check Type" data-container="body">Type</th>
                <th data-column="amount" class="text-left" id="TDtooltip" data-toggle="tooltip" data-placement="bottom" data-original-title="Check Amount" data-container="body">Amount</th>
                <th data-column="status" class="text-left" id="TDtooltip" data-toggle="tooltip" data-placement="bottom" data-original-title="Check Status" data-container="body">Status</th>
                <th data-column="status" class="text-left" id="TDtooltip" data-toggle="tooltip" data-placement="bottom" data-original-title="Action" data-container="body">Actions</th>
            </tr>
        </thead>
    </table>
</div>
</div>

@section scripts
{
    @Scripts.Render("~/bundles/dataTables")

    <script type="text/javascript">
        $.extend($.fn.dataTable.defaults, {
            'pagingType': 'full_numbers',
            'pageLength': 25,
            'language': {
                'paginate': {
                    'first': '&laquo;',
                    'last': '&raquo;',
                    'previous': '&lsaquo;',
                    'next': '&rsaquo;'
                },
                'info': 'Displaying _START_-_END_ of _TOTAL_',
                'infoEmpty': 'Displaying 0 to 0 of 0',
                'infoFiltered': '',
                'search': '',
                'zeroRecords': 'No matching records found'
            },
            //'dom':<"top"f>rt<"bottom"<"pull-left"l><"pull-right"i>p<"clear">>',
            'dom': '<"top"f>rt<"bottom"<"pull-left"l><"pull-right"i>p<"clear">>',
            'initComplete': function (settings, json) {
                $('.dataTables_filter input[type=search]').attr('placeholder', 'Search');
            }
        });


        $(document).ready(function () {
            var table = $('#CheckRegisterTable').dataTable({
                'ajax': {
                    type: 'POST',
                    url: '@Url.Action("GetData", "CheckRegister")',
                    //data: function (d) {

                    //}
                },
                columns: [
                {
                    data: "select",
                    render: function (data, type, row) {
                        if (type === 'display') {
                            return '<input type="checkbox" class="editor-active">';
                        }
                        return data;
                    },
                    sortable: false,
                    className: "text-center"
                },
                {
                    data: 'checkNo',
                    sortable: true,
                    className: "text-center"
                },
                {
                    data: 'studentID',
                    sortable: true,
                    className: "text-center"
                },
                {
                    data: 'ssn',
                    sortable: true,
                    className: "text-center"
                },
                {
                    data: 'payee',
                    sortable: true,
                    className: "text-center"
                },
                {
                    data: 'date',
                    sortable: true,
                    className: "text-center"
                },
                {
                    data: 'type',
                    sortable: true,
                    className: "text-center"
                },
                {
                    data: 'amount',
                    sortable: true,
                    className: "text-right"
                },
                {
                    data: 'status',
                    sortable: true,
                    className: "text-center"
                },
                {
                    data: 'status',
                    render: function (data, type, row) {
                        //var row = table.row($(this).parents('tr')).data();
                        if ( data == "Printed") {
                            return '<button><i class="fa-fa-reply"></button><i class="fa-fa-rotate-left"><button><i class="fa-fa-close"></button><button><i class="fa-fa-print"></button><button><i class="fa-fa-info"></button>';
                        }
                        else if (data == "Cleared") {
                            return '<button><i class="fa-fa-info"></button>';
                        }
                        else if (data == "Stopped") {
                            return '<button><i class="fa-fa-rotate-left"></button><button><i class="fa-fa-close"></button><button><i class="fa-fa-info"></button>';
                        }
                        else if (data == "Reissued") {
                            return '<button><i class="fa-fa-reply"></button><button><i class="fa-fa-rotate-left"></button><button><i class="fa-fa-close"></button><button><i class="fa-fa-info"></button>';
                        }
                        else if (data == "Returned") {
                            return '<button><i class="fa-fa-rotate-left"></button><button><i class="fa-fa-info"></button>';
                        }
                        else if (data == "Reissue Pending") {
                            return '<button><i class="fa-fa-rotate-left"></button><button><i class="fa-fa-info"></button>';
                        }
                        else if (data == "Stop Pending") {
                            return '<button><i class="fa-fa-close"></button><button><i class="fa-fa-info"></button>';
                        }
                    },
                    sortable: false,
                    className: "text-center"
                }
                ],
                ordering: true,
                order: [0, 'Name'],
                processing: true,
                serverSide: true
            });
        });

        $('[data-toggle="tooltip"]').tooltip({
            delay: 0,
            track: true,
            fade: 100
        });
    </script>
}

控制器：

using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using SAAS.Models;
using SAAS.Services;

namespace SAAS.Controllers
{
    public class CheckRegisterController : Controller
    {
        // GET: CheckRegister
        public ActionResult CheckRegister()
        {
            return View();
        }

        public JsonResult GetData(DTParameters dtModel, FilterViewModel filterModel)
        {
            try
            {
                List<CheckRegister> data = new CheckRegisterService().GetCheckRegisters(dtModel.Start, dtModel.Length);
                int count = new CheckRegisterService().Count();
                DTResult<CheckRegister> result = new DTResult<CheckRegister>
                {
                    draw = dtModel.Draw,
                    data = data,
                    recordsFiltered = count,
                    recordsTotal = count
                };
                return Json(result);
            }
            catch(Exception ex)
            {
                return Json(new {error = ex.Message});
            }
        }
    }
}

型号：

using System;
using System.ComponentModel.DataAnnotations;
using System.Data.Entity;

namespace SAAS.Models
{
    public class CheckRegister
    {
        public CheckRegister(string CheckNo, string StudentID, string SSN, string Payee, string Date, string Type, string Amount, string Status)
        {
            checkNo = CheckNo;
            studentID = StudentID;
            ssn = SSN;
            payee = Payee;
            date = Date;
            type = Type;
            amount = Amount;
            status = Status;
        }

        [Key]
        public string checkNo { get; set; }
        public string studentID { get; set; }
        public string ssn { get; set; }
        public string payee { get; set; }
        public string date { get; set; }
        public string type { get; set; }
        public string amount { get; set; }
        public string status { get; set; }
    }
}

服务：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.UI.WebControls;
using SAAS.Models;

namespace SAAS.Services
{
    public class CheckRegisterService
    {
        private static readonly List<CheckRegister> CheckRegisters;

        static CheckRegisterService()
        {
            CheckRegisters = new List<CheckRegister>
            {
                new CheckRegister("1234567890", "69489", "123-45-6789", "Harry Potter", "12/10/2014", "Termination", "$5,000.00", "Printed"),
                new CheckRegister("4561237890", "53191", "987-65-4321", "Hermione Granger", "12/1/2014", "Bonus", "$300.00", "Cleared"),
                new CheckRegister("6543217890", "84148", "651-47-3892", "Ron Weasley", "12/1/2014", "Allotment", "$150.00", "Stopped"),
                new CheckRegister("7987654321", "71258", "456-78-9123", "Hogwarts School", "12/1/2014", "Allotment", "$300.00", "Returned"),
                new CheckRegister("8987654329", "69460", "731-61-8731", "Draco Maifoy", "12/1/2014", "Allotment", "$1,000.00", "Reissued"),
                new CheckRegister("9987654321", "52538", "290-97-2939", "Vincent Crabbe", "12/1/2014", "Allotment", "$300.00", "Reissue Pending"),
                new CheckRegister("9987654329", "57716", "336-92-7381", "Gegory Goyle", "12/1/2014", "Allotment", "$300.00", "Stop Pending"),
                new CheckRegister("9987654320", "52531", "290-97-2939", "Vincent Croub", "12/2/2014", "Allotment", "$310.00", "Reissue Pending"),
                new CheckRegister("9987654322", "52532", "290-97-2532", "JJ Hardy", "12/3/2014", "Allotment", "$301.00", "Reissue Pending"),
                new CheckRegister("9987654323", "52533", "290-97-6424", "Adam Levine", "12/4/2014", "Allotment", "$34.00", "Reissue Pending"),
                new CheckRegister("9987654324", "52534", "290-97-1632", "Blake Shelton", "12/5/2014", "Allotment", "$330.00", "Reissue Pending"),
                new CheckRegister("9987654325", "52535", "290-42-1324", "Nick Jonas", "12/6/2014", "Allotment", "$350.00", "Reissue Pending"),
                new CheckRegister("9987654326", "52536", "290-53-3539", "Chris Davis", "12/7/2014", "Allotment", "$360.00", "Reissue Pending"),
                new CheckRegister("9987654327", "52537", "325-23-5532", "Chris Tillman", "12/8/2014", "Allotment", "$370.00", "Reissue Pending"),
                new CheckRegister("9987654328", "52539", "290-31-6883", "Manny Machado", "12/9/2014", "Allotment", "$380.00", "Reissue Pending"),
            };
        }

        public List<CheckRegister> GetCheckRegisters(int start, int length)
        {
            return FilterCheckRegisters().Skip(start).Take(length).ToList();
            //return CheckRegisters.ToList();
        }

        public int Count()
        {
            return FilterCheckRegisters().Count();
        }

        public IQueryable<CheckRegister> FilterCheckRegisters()
        {
            IQueryable<CheckRegister> results = CheckRegisters.AsQueryable();

            return results;
        }
    }
}

Answer 1

以下内容适合您：

Here is a test page showing how this works它不使用MVC，但你会明白

$(document).ready(function() {  

    $('#CheckRegisterTable').dataTable( {

           'ajax': {
               type: 'POST',
               url: '@Url.Action("GetData", "CheckRegister")',
            },
            columns: [
            {
                 // data: "select",  // commenting out since your object doesnt seem to have a 'select' property                
                render: function (data, type, row ) {
                    if ( type === 'display' ) {
                        return '<input type="checkbox" class="editor-active">';
                    }
                    return ''; // changed from `return data;` since your object doesnt seem to have a 'select' property
                },
                sortable: false,
                className: "text-center" 
            },
            {
                data: 'checkNo',
                sortable: true,
                className: "text-center"
            },
            {
                data: 'studentID',
                "sortable": true,
                className: "text-center"
            },
            {
                data: 'ssn',
                sortable: true,
                className: "text-center"
            },
            {
                data: 'payee',
                sortable: true,
                className: "text-center"
            },
            {
                data: 'date',
                sortable: true,
                className: "text-center"
            },
            {
                data: 'type',
                sortable: true,
                className: "text-center"
            },
            {
                data: 'amount',
                sortable: true,
                className: "text-right"
            },
            {
                data: 'status',
                sortable: true,
                className: "text-center"
            },
            {
                render: function (data, type, row) {
                    // row is an object not an  array, change the below to use dot notation like `row.status` not `row[8]`
                    if (row.status == "Printed") {
                        return '<button><i class="fa-fa-reply"></button><i class="fa-fa-rotate-left"><button><i class="fa-fa-close"></button><button><i class="fa-fa-print"></button><button><i class="fa-fa-info"></button>'
                    }
                    else if (row.status == "Cleared") {
                        return '<button><i class="fa-fa-info"></button>'
                    }
                    else if (row.status == "Stopped") {
                        return '<button><i class="fa-fa-rotate-left"></button><button><i class="fa-fa-close"></button><button><i class="fa-fa-info"></button>'
                    }
                    else if (row.status == "Reissued") {
                        return '<button><i class="fa-fa-reply"></button><button><i class="fa-fa-rotate-left"></button><button><i class="fa-fa-close"></button><button><i class="fa-fa-info"></button>'
                    }
                    else if (row.status == "Returned") {
                        return '<button><i class="fa-fa-rotate-left"></button><button><i class="fa-fa-info"></button>'
                    }
                    else if (row.status == "Reissue Pending") {
                        return '<button><i class="fa-fa-rotate-left"></button><button><i class="fa-fa-info"></button>'
                    }
                    else if (row.status == "Stop Pending") {
                        return '<button><i class="fa-fa-close"></button><button><i class="fa-fa-info"></button>'
                    }
                }
            }
            ],
            ordering: true, 
            order: [ [0, 'asc'] ], // pretty sure this should be a nested array like [ [ column index, sortorder] ] 
            processing: true, // not sure if you need this
            serverSide: true  // not sure if you need this
    } );  

} );

Answer 2

数据表声明应位于$(document).ready下，render: function (data, type, row)也是列定义的一部分。试试这个：

$(document).ready(function() {
        var table = $('#CheckRegisterTable').dataTable({
                'ajax': {
                    type: 'POST',
                    url: '@Url.Action("GetData", "CheckRegister")',
                    //data: function (d) {

                    //}
                },
                columns: [
                {
                    data:   "select",
                    render: function ( data, type, row ) {
                        if ( type === 'display' ) {
                            return '<input type="checkbox" class="editor-active">';
                        }
                        return data;
                    },
                    sortable: false,
                    className: "text-center"
                },
                {
                    data: 'checkNo',
                    sortable: true,
                    className: "text-center"
                },
                {
                    data: 'studentID',
                    sortable: true,
                    className: "text-center"
                },
                {
                    data: 'ssn',
                    sortable: true,
                    className: "text-center"
                },
                {
                    data: 'payee',
                    sortable: true,
                    className: "text-center"
                },
                {
                    data: 'date',
                    sortable: true,
                    className: "text-center"
                },
                {
                    data: 'type',
                    sortable: true,
                    className: "text-center"
                },
                {
                    data: 'amount',
                    sortable: true,
                    className: "text-right"
                },
                {
                    data: 'status',
                    sortable: true,
                    className: "text-center",
                    render: function (data, type, row) {
                        //var row = table.row($(this).parents('tr')).data();
                        if (row[8] == "Printed") {
                            return '<button><i class="fa-fa-reply"></button><i class="fa-fa-rotate-left"><button><i class="fa-fa-close"></button><button><i class="fa-fa-print"></button><button><i class="fa-fa-info"></button>'
                        }
                        else if (row[8] == "Cleared") {
                            return '<button><i class="fa-fa-info"></button>'
                        }
                        else if (row[8] == "Stopped") {
                            return '<button><i class="fa-fa-rotate-left"></button><button><i class="fa-fa-close"></button><button><i class="fa-fa-info"></button>'
                        }
                        else if (row[8] == "Reissued") {
                            return '<button><i class="fa-fa-reply"></button><button><i class="fa-fa-rotate-left"></button><button><i class="fa-fa-close"></button><button><i class="fa-fa-info"></button>'
                        }
                        else if (row[8] == "Returned") {
                            return '<button><i class="fa-fa-rotate-left"></button><button><i class="fa-fa-info"></button>'
                        }
                        else if (row[8] == "Reissue Pending") {
                            return '<button><i class="fa-fa-rotate-left"></button><button><i class="fa-fa-info"></button>'
                        }
                        else if (row[8] == "Stop Pending") {
                            return '<button><i class="fa-fa-close"></button><button><i class="fa-fa-info"></button>'
                        }

                    }

                }
                ],
                ordering: true,
                order: [0, 'Name'],
                processing: true,
                serverSide: true
            });
    });

DataTable Cells动态内容

2 个答案: