Question

我是个新人，请耐心等待。开始。我有一些我继承的使用JQuery和Datatables的代码。目前，默认情况下，所有列似乎都是正确对齐的。如果可能的话，我想集中赞助商名称，公司和注册日期。问题是在呈现表时所有列都继续右对齐。这是我的代码。

function sponsorInformation(sponsorData){
   var h = '' + //
           '<table id="sponsorTable">' + //
           '<thead>' + //
           '<tr>' + //
           '<th>Sponsor Number</th>' + //
           '<th>Sponsor Name</th>' + //
           '<th>Sponsor Company</th>' + //
           '<th>Sponsor Regitration Date</th>' + //
           '</tr>' + //
           '</thead>' + //
           '</table>';

   $('#sponsorInfoTableLocation').html(h);

   var columns = [
       { data : 'sponsorNumber', sClass: 'right' },
       { data : 'sponsorName', sClass: 'left' },
       { data : 'sponsorCompany', sClass: 'left' },
       { data : 'sponsorRegistrationDate', sClass: 'left' }
   ];

   var sponsorInfoTable = $('#sponsorTable').DataTable({
      columns : columns,
      data    : sponsorData
   });
}

该函数传入JSON数据对象（sponsorData）。数据本身是正确的，但我无法使对齐工作。我已经查找了类似的问题，但似乎没有解决这种情况，其中列被定义为变量并使用columns.data。有什么建议？我错过了什么或做错了什么？

Answer 1

在我看来，你正走在正确的道路上。基于你创建的东西

http://jsbin.com/gebupef/edit?html,css,js,output

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>JS Bin</title>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
        <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
        <script>

            var dd = [{
                sponsorNumber: 1,
                sponsorName: "sponsor 1", sponsorCompany: "the company", sponsorRegistrationDate: "12/20/2017"
            }];
            $(document).ready(function () {

                sponsorInformation(dd);
            });

            function sponsorInformation(sponsorData) {
                var h =
                        '<table id="sponsorTable">' +
                        '<thead>' +
                        '<tr>' +
                        '<th>Sponsor Number</th>' +
                        '<th>Sponsor Name</th>' +
                        '<th>Sponsor Company</th>' +
                        '<th>Sponsor Regitration Date</th>' +
                        '</tr>' +
                        '</thead>' +
                        "<tbody></tbody>" +
                    '</table>';

                $('#sponsorInfoTableLocation').html(h);

                var columns = [
                    { data: 'sponsorNumber', className: "center" },
                    { data: 'sponsorName', className: "left" },
                    { data: 'sponsorCompany', className: "right" },
                    { data: 'sponsorRegistrationDate', className: "right" }
                ];

                var sponsorInfoTable = $('#sponsorTable').DataTable({
                    columns: columns,
                    data: sponsorData
                });
            }

        </script>
        <style>
            .left {
                text-align: left;
            }

            .right {
                text-align: right;
            }

            .center {
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="sponsorInfoTableLocation"></div>
    </body>
    </html>

使用＆＃34; columns.data＆＃34;右对齐JQuery Datatable单元格。和JSON数据？

1 个答案: