Question

我正在使用dataTables插件。我看到数字数据没有正确对齐。

这是dataTables的工作方式吗？
我的数据格式不正确吗？
如何编写检查dataTable每个单元格数据类型的功能，如果数据是数字，则将数据对齐？

我使用的插件来自：http://www.datatables.net/

Answer 1

定义datatables对象时，可以选择自定义列类型，包括添加css类。然后，您可以使用该类对该列执行任何操作。

$('#myTable').dataTable( {
    "aoColumnDefs": [

      { "sClass": "numericCol", "aTargets": [ 0 ] }
      //You can also set 'sType' to 'numeric' and use the built in css.           
    ]
  } );

aTargets的值是您要将此类应用于的列的索引。

在你的CSS中有类似

的内容

.numericCol{
  float:right;
}

Answer 2

在列定义中，您可以使用className：

$("#tabDatos").dataTable({
  columns: [
    { data: "fecha" },    
    { data: "importe", className: "text-right" }
  ]
});

如果您不使用Bootstrap，请定义css类“ text-right”

Answer 3

这是我的解决方案。

$('#itemTable1').dataTable({bPaginate: false, bFilter: false, bInfo: false, bSort: false});

$('#itemTable2').dataTable({bPaginate: false, bFilter: false, bInfo: false, bSort: false});

$('#itemTable3').dataTable({bPaginate: false, bFilter: false, bInfo: false, bSort: false});

$('#itemTable4').dataTable({bPaginate: false, bFilter: false, bInfo: false, bSort: false});

$('#itemTable5').dataTable({bPaginate: false, bFilter: false, bInfo: false, bSort: false});

//For fourth example
$('#itemTable4 td.numval').css('text-align', 'right');

//For fifth example
var tableData = [['5100','Bacon',1,'KG',400],['5101','Chilly',500,'GM',30],['5102','Pepper',1,'KG',250]];

$.each(tableData, function(i, item) {
	 $('#itemTable5').DataTable().row.add([
       tableData[i][0], 
       tableData[i][1], 
       tableData[i][2], 
       tableData[i][3],
       tableData[i][4]
     ]).draw();
});

// after loading data 
$("#itemTable5 tbody tr").each(function() {			        $(this).find('td:eq(2)').addClass('numcol');		    $(this).find('td:eq(4)').addClass('numcol');
});

$('#itemTable5 td.numcol').css('text-align', 'right');

table td.numcol {
  text-align : right;
}

<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
  </head>
  <body>
    <h2>Example 1 : Using Align Attribute</h2>
    <table id="itemTable1">
      <thead>
        <tr>
          <th>Item Id</th>
          <th>Item Name</th>
          <th>Item Qty</th>
          <th>Item Unit</th>
          <th>Item Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>5100</td>
          <td>Bacon</td>
          <td align="right">1</td>
          <td>KG</td>
          <td align="right">400</td>
        </tr><tr>
          <td>5101</td>
          <td>Chilly</td>
          <td align="right">500</td>
          <td>GM</td>
          <td align="right">30</td>
        </tr>
        <tr>
          <td>5102</td>
          <td>Pepper</td>
          <td align="right">1</td>
          <td>KG</td>
          <td align="right">250</td>
        </tr>
      </tbody>
    </table>
    
    <h2>Example 2 : Using Style </h2>
    <table id="itemTable2">
      <thead>
        <tr>
          <th>Item Id</th>
          <th>Item Name</th>
          <th>Item Qty</th>
          <th>Item Unit</th>
          <th>Item Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>5100</td>
          <td>Bacon</td>
          <td style="text-align:right;">1</td>
          <td>KG</td>
          <td style="text-align:right;">400</td>
        </tr><tr>
          <td>5101</td>
          <td>Chilly</td>
          <td style="text-align:right;">500</td>
          <td>GM</td>
          <td style="text-align:right;">30</td>
        </tr>
        <tr>
          <td>5102</td>
          <td>Pepper</td>
          <td style="text-align:right;">1</td>
          <td>KG</td>
          <td style="text-align:right;">250</td>
        </tr>
      </tbody>
    </table>
    
    <h2>Example 3 : Using Class </h2>
    <table id="itemTable3">
      <thead>
        <tr>
          <th>Item Id</th>
          <th>Item Name</th>
          <th>Item Qty</th>
          <th>Item Unit</th>
          <th>Item Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>5100</td>
          <td>Bacon</td>
          <td class="numcol">1</td>
          <td>KG</td>
          <td class="numcol">400</td>
        </tr><tr>
          <td>5101</td>
          <td>Chilly</td>
          <td class="numcol">500</td>
          <td>GM</td>
          <td class="numcol">30</td>
        </tr>
        <tr>
          <td>5102</td>
          <td>Pepper</td>
          <td class="numcol">1</td>
          <td>KG</td>
          <td class="numcol">250</td>
        </tr>
      </tbody>
    </table>
    
    <h2>Example 4 : Using JQuery for static table</h2>
    <table id="itemTable4">
      <thead>
        <tr>
          <th>Item Id</th>
          <th>Item Name</th>
          <th>Item Qty</th>
          <th>Item Unit</th>
          <th>Item Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>5100</td>
          <td>Bacon</td>
          <td class="numval">1</td>
          <td>KG</td>
          <td class="numval">400</td>
        </tr><tr>
          <td>5101</td>
          <td>Chilly</td>
          <td class="numval">500</td>
          <td>GM</td>
          <td class="numval">30</td>
        </tr>
        <tr>
          <td>5102</td>
          <td>Pepper</td>
          <td class="numval">1</td>
          <td>KG</td>
          <td class="numval">250</td>
        </tr>
      </tbody>
    </table>
    
    <h2>Example 5 : Using JQuery for dynamic table</h2>
    <table id="itemTable5">
      <thead>
        <tr>
          <th>Item Id</th>
          <th>Item Name</th>
          <th>Item Qty</th>
          <th>Item Unit</th>
          <th>Item Price</th>
        </tr>
      </thead>
    </table>
    
  </body>  
</html>

我希望你从上面的代码中找到有用的东西......干杯......

Answer 4

我使用ColumnDefs对齐数据：

"columnDefs": [{ targets: [3, 4, 5, 6, 7], className: 'dt-body-right' },
                           { targets: [0, 1, 2], className: 'dt-body-center' }],

第3、4、5、6、7列与右侧对齐
第0、1、2列与中心对齐

或通过直接申请课程

 { 'data': 'TotalMaleFarmers',className: "text-center" },

Answer 5

这是我的解决方案，适用于版本1.10.16以及任何列：

$.fn.table = function() {
  return this.each(function() {
    var self = $(this);
    self.DataTable({
      columnDefs: self.find('th').map(function() {
        var self = $(this);
        return {
          render: function(data, type, row, meta) {
            if (data === (+data).toString()) {
              return '<div style="text-align: right">' + data + '</div>';
            } else {
              return data;
            }
          },
          targets: self.index()
        };
      }).get()
    });
  });
};

Answer 6

在版本1.10.19中将我的第二和第三列右对齐，我这样做：

$('#myDataTableHere').DataTable({
    columnDefs: [
        { targets: [1, 2], className: "right-aligned-cell" },
    ]
}

很明显，我的CSS具有.right-aligned-cell和text-align: right;的类，以实际获取结果。

注意： HTML文档建议，使用CSS类.dt-body-right，您可以做到这一点。这不适用于AJAX方法。

Answer 7

已经有几个小时了，我一直在绞尽脑汁，使数字在“打印”模式下对齐到右边。有人知道如何在打印时使数字对齐。

html的格式正确，但是在打印时所有内容都移到了左侧。

您可以使用某些功能，在检测诸如“”之类的标签类型时，可以将其中的所有内容分配一个对齐方式。这样，我们可以将数字放在该标签内并使其向右对齐。

非常感谢您能给我的帮助。

Answer 8

从您的评论看来，您似乎在谈论通过打印机实际打印表数据。如果是这样，您需要制作一个打印样式表和/或在您的自定义CSS样式表中设置 @media查询以打印。

我希望两者都做

class UserCreationFormTest(TestCase):
    def setUp(self):
        ob=User(user_id=0,username="AAA")

    def test_usercreationform(self):
        form_data={'user_id': 0, 'username': 'AAA'}
        form=UserCreationForm(data=form_data)
        self.assertTrue(form.is_valid())
        self.assertIsInstance(form_data.get('user_id'), int)
        self.assertIsInstance(form_data.get('username'), str)

    def test_save(self):
        self.ob.save()
        self.assertEqual(self.ob.username,'AAA')

根据数据表的类标识，这非常简单。

<link rel="stylesheet" type="text/css" media="print" href="/assets/print.css">

@media print{

img{display:none;}
.text-right{float: right; clear:none;}
etc...

}

如何在dataTables中将数值数据右对齐

8 个答案: