"columns.data"とJSONデータを使用して、JQuery Datatableセルを右揃えにしますか？

私はnewbyですので、私と一緒にご負担ください。ここに行く。 JQueryとDatatablesを使用して継承したコードがいくつかあります。現在、すべての列はデフォルトでは右揃えになっているようです。可能であれば、スポンサーの名前、会社名、登録日を揃えたいと思います。問題は、テーブルがレンダリングされるときに、すべての列が右揃えを継続することです。ここに私のコードです。"columns.data"とJSONデータを使用して、JQuery Datatableセルを右揃えにしますか？

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を使用するこのシナリオには対処していないようです。助言がありますか？何が欠けているのか、間違っているのですか？

出典

2017-05-23 crapshoot

を作成しましたか？ – user907860

左と右は定義されたクラスですよね？ sClassは従来の用語です。 1.10+を使用している場合は、classNameを使用します。 – Bindrid

実際には、[レガシーパラメータ]（https://legacy.datatables.net/ref#slass）であるカラムに 'sClass'属性を指定しています。 'sClass'を[' className']（https://datatables.net/reference/option/columns.className）に置き換えるだけです。 – mmushtaq

あなたは正しい方向に向かっているように見えます。自分のものに基づいて、私はあなたがそのようなjsfiddleか何かに例を作ることができ

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>

出典

2017-05-24 01:31:08 Bindrid

"columns.data"とJSONデータを使用して、JQuery Datatableセルを右揃えにしますか？

答えて

関連する問題