数据表列未右对齐

时间：2018-12-17 07:52:37

标签： javascript datatables bootstrap-4

我正在处理已经成功创建的数据表，但面临的问题是数据在某些列的右侧对齐

代码段 

var data=[
		  {
		    "amount": 518212,
		    "billdate": "2018-08-04",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 104801,
		    "billdate": "2018-08-04",
		    "outlet": "MALLESHWARAM"
		  },
		  {
		    "amount": 138151,
		    "billdate": "2018-08-04",
		    "outlet": "KOLAR"
		  },
		  {
		    "amount": 628358,
		    "billdate": "2018-08-05",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 115223,
		    "billdate": "2018-08-05",
		    "outlet": "MALLESHWARAM"
		  },
		  {
		    "amount": 134107,
		    "billdate": "2018-08-05",
		    "outlet": "KOLAR"
		  },
		  {
		    "amount": 177866,
		    "billdate": "2018-08-06",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 66095,
		    "billdate": "2018-08-06",
		    "outlet": "KOLAR"
		  },
		  {
		    "amount": 284069,
		    "billdate": "2018-08-07",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 58789,
		    "billdate": "2018-08-07",
		    "outlet": "MALLESHWARAM"
		  },
		  {
		    "amount": 67886,
		    "billdate": "2018-08-07",
		    "outlet": "KOLAR"
		  },
		  {
		    "amount": 313128,
		    "billdate": "2018-08-08",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 59939,
		    "billdate": "2018-08-08",
		    "outlet": "MALLESHWARAM"
		  },
		  {
		    "amount": 68558,
		    "billdate": "2018-08-08",
		    "outlet": "KOLAR"
		  },
		  {
		    "amount": 321797,
		    "billdate": "2018-08-09",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 64431,
		    "billdate": "2018-08-09",
		    "outlet": "MALLESHWARAM"
		  },
		  {
		    "amount": 57352,
		    "billdate": "2018-08-09",
		    "outlet": "KOLAR"
		  },
		  {
		    "amount": 323556,
		    "billdate": "2018-08-10",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 58772,
		    "billdate": "2018-08-10",
		    "outlet": "MALLESHWARAM"
		  },
		  {
		    "amount": 43722,
		    "billdate": "2018-08-10",
		    "outlet": "KOLAR"
		  },
		  {
		    "amount": 464127,
		    "billdate": "2018-08-11",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 93110,
		    "billdate": "2018-08-11",
		    "outlet": "MALLESHWARAM"
		  },
		  {
		    "amount": 62213,
		    "billdate": "2018-08-11",
		    "outlet": "KOLAR"
		  },
		  {
		    "amount": 626772,
		    "billdate": "2018-08-12",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 126933,
		    "billdate": "2018-08-12",
		    "outlet": "MALLESHWARAM"
		  },
		  {
		    "amount": 63119,
		    "billdate": "2018-08-12",
		    "outlet": "KOLAR"
		  },
		  {
		    "amount": 167391,
		    "billdate": "2018-08-13",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 27110,
		    "billdate": "2018-08-13",
		    "outlet": "KOLAR"
		  },
		  {
		    "amount": 275115,
		    "billdate": "2018-08-14",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 58633,
		    "billdate": "2018-08-14",
		    "outlet": "MALLESHWARAM"
		  },
		  {
		    "amount": 37920,
		    "billdate": "2018-08-14",
		    "outlet": "KOLAR"
		  }
		];
		var columndef=[{title:"amount",data:"amount"},{title:"billdate",data:"billdate"},{title:"outlet",data:"outlet"}];
					$('#tbl').DataTable({
		      columns:columndef,
						data : data,
		        scrollY:        '30vh',
		        scrollCollapse: true,
		        paging:         true,
		        "columnDefs" : [ {
					"targets" : [0],
					  className : 'dt-body-right',
					"render" : function(data, type, row) {
						return Number(data).toLocaleString('en-IN', {
							maximumFractionDigits : 2,

						});
						
					}
		      
				}]
					
					});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/sc-1.5.0/datatables.min.css"/>
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/sc-1.5.0/datatables.min.js"></script>
<script
		src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

<table id="tbl"></table>

我还为印度货币添加了逗号分隔符，该分隔符可以正常工作，但不能保持一致。

我正在尝试对齐第一列，即正确但不正确，我不知道我在哪里丢失。

1 个答案:

答案 0 :(得分：0)

您做对了，但没有包括必需的CDN Link。

包含

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/jquery.dataTables.min.css" />

检查代码段 

var data=[
		  {
		    "amount": 518212,
		    "billdate": "2018-08-04",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 104801,
		    "billdate": "2018-08-04",
		    "outlet": "MALLESHWARAM"
		  },
		  {
		    "amount": 138151,
		    "billdate": "2018-08-04",
		    "outlet": "KOLAR"
		  },
		  {
		    "amount": 628358,
		    "billdate": "2018-08-05",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 115223,
		    "billdate": "2018-08-05",
		    "outlet": "MALLESHWARAM"
		  },
		  {
		    "amount": 134107,
		    "billdate": "2018-08-05",
		    "outlet": "KOLAR"
		  },
		  {
		    "amount": 177866,
		    "billdate": "2018-08-06",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 66095,
		    "billdate": "2018-08-06",
		    "outlet": "KOLAR"
		  },
		  {
		    "amount": 284069,
		    "billdate": "2018-08-07",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 58789,
		    "billdate": "2018-08-07",
		    "outlet": "MALLESHWARAM"
		  },
		  {
		    "amount": 67886,
		    "billdate": "2018-08-07",
		    "outlet": "KOLAR"
		  },
		  {
		    "amount": 313128,
		    "billdate": "2018-08-08",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 59939,
		    "billdate": "2018-08-08",
		    "outlet": "MALLESHWARAM"
		  },
		  {
		    "amount": 68558,
		    "billdate": "2018-08-08",
		    "outlet": "KOLAR"
		  },
		  {
		    "amount": 321797,
		    "billdate": "2018-08-09",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 64431,
		    "billdate": "2018-08-09",
		    "outlet": "MALLESHWARAM"
		  },
		  {
		    "amount": 57352,
		    "billdate": "2018-08-09",
		    "outlet": "KOLAR"
		  },
		  {
		    "amount": 323556,
		    "billdate": "2018-08-10",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 58772,
		    "billdate": "2018-08-10",
		    "outlet": "MALLESHWARAM"
		  },
		  {
		    "amount": 43722,
		    "billdate": "2018-08-10",
		    "outlet": "KOLAR"
		  },
		  {
		    "amount": 464127,
		    "billdate": "2018-08-11",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 93110,
		    "billdate": "2018-08-11",
		    "outlet": "MALLESHWARAM"
		  },
		  {
		    "amount": 62213,
		    "billdate": "2018-08-11",
		    "outlet": "KOLAR"
		  },
		  {
		    "amount": 626772,
		    "billdate": "2018-08-12",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 126933,
		    "billdate": "2018-08-12",
		    "outlet": "MALLESHWARAM"
		  },
		  {
		    "amount": 63119,
		    "billdate": "2018-08-12",
		    "outlet": "KOLAR"
		  },
		  {
		    "amount": 167391,
		    "billdate": "2018-08-13",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 27110,
		    "billdate": "2018-08-13",
		    "outlet": "KOLAR"
		  },
		  {
		    "amount": 275115,
		    "billdate": "2018-08-14",
		    "outlet": "JAYANAGAR"
		  },
		  {
		    "amount": 58633,
		    "billdate": "2018-08-14",
		    "outlet": "MALLESHWARAM"
		  },
		  {
		    "amount": 37920,
		    "billdate": "2018-08-14",
		    "outlet": "KOLAR"
		  }
		];
		var columndef=[{title:"amount",data:"amount"},{title:"billdate",data:"billdate"},{title:"outlet",data:"outlet"}];
					$('#tbl').DataTable({
		      columns:columndef,
						data : data,
		        scrollY:        '30vh',
		        scrollCollapse: true,
		        paging:         true,
		        "columnDefs" : [ {
					"targets" : [0],
					  className : 'dt-body-right',
					"render" : function(data, type, row) {
						return Number(data).toLocaleString('en-IN', {
							maximumFractionDigits : 2,

						});
						
					}
		      
				}]
					
					});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/sc-1.5.0/datatables.min.css"/>
<link rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/jquery.dataTables.min.css" />
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/sc-1.5.0/datatables.min.js"></script>
<script
		src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

<table id="tbl"></table>

相关问题
最新问题