Right align JQuery Datatable cell using "columns.data" and JSON data?

Question

I'm a newby so please bear with me. Here goes. I have some code that I inherited that uses JQuery and Datatables. Currently all columns seem to be aligned right by default. I would like to center align sponsor name, company and registration date, if possible. The issue is that all columns continue to right align when the table is rendered. Here is my code.

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
   });
}

The function passes in a JSON data object (sponsorData). The data itself is correct but I cannot get the alignments to work. I've looked for similar questions but none seem to address this scenario where the columns are defined as a variable and use columns.data. Any suggestions? What am I missing or doing wrong?

could you make an example on jsfiddle or something like that? — d.k
– d.k, Commented May 24, 2017 at 0:04
Left and right are definded classes, right? sClass is a legacy term. If you are using 1.10+, use className. — Bindrid
– Bindrid, Commented May 24, 2017 at 0:47
Actually you are specify sClass attribute for your column which is a Legacy parameter. You just need to replace sClass with className. — mmushtaq
– mmushtaq, Commented May 24, 2017 at 4:13

Bindrid · Accepted Answer · 2017-05-24 01:31:08Z

It looks to me like you are headed down the right path. Based on your stuff I created

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>

Collectives™ on Stack Overflow

Right align JQuery Datatable cell using "columns.data" and JSON data?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related