CODEWITHSUNDEEP
jqueryhtmldatatables
crapshoot
crapshoot

Reputation: 83

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

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?

Upvotes: 4

Views: 4484

Answers (1)

Bindrid
Bindrid

Reputation: 3735

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>

Upvotes: 1

Related Questions