[英]How to add flags for each country in datatables
這是我的帶有標志的 javascript
<script type="text/javascript">
$(document).ready(function() {
var dataTable = $("#example").DataTable( {
processing: true,
bSort: false,
serverSide: true,
iDisplayLength: 10,
"ajax": {
"url": "json/j-t.php",
"type": "POST"
},
} );
$("#example_filter").css("display","none"); // hiding global search box
$(".example-search-input").on("keyup click change", function () {
var ixoh =$(this).attr("id"); // getting column index
var vxoh =$(this).val(); // getting search input value
dataTable.columns(ixoh).search(vxoh).draw();
if(ixoh != null || ixoh != null){ dataTable.columns(ixoh).search(vxoh).draw(); };
} );
</script>
這是文件 jt.php
$sql = "SELECT *";
$sql.=" FROM info WHERE type='1' AND sold='0'";
$query=mysqli_query($conn, $sql) or die;
$totalData = mysqli_num_rows($query);
$totalFiltered = $totalData;
$data = array();
while( $row=mysqli_fetch_array($query) ) { // preparing an array
$nestedData=array();
$nestedData[] = $row["types"];
$nestedData[] = $row["country"];
$nestedData[] = $row["infos"];
$nestedData[] = $row["price"];
$nestedData[] = $row["email"];
$data[] = $nestedData;
}
$json_data = array(
"draw" => intval( $requestData['draw'] ),
"recordsTotal" => intval( $totalData ),
"recordsFiltered" => intval( $totalFiltered ),
"data" => $data
);
echo json_encode($json_data);
這是我的數據庫
SELECT * FROM `info` WHERE `country` LIKE 'CA' ORDER BY `date_added` DESC
我需要添加數據表,就像國家名稱 CA US DE GB 等...我想在數據表國家行中添加標志和國家名稱
您可以從這樣的地方下載所有 SVG 標志...
https://observablehq.com/@slattery/iso-3166-svg-flags
...然后使用ALTER TABLE info ADD COLUMN
查詢向您的數據庫添加一列,其中包括與您的標志文件關聯的名稱,然后是一堆UPDATE
查詢。
您的 PHP 邏輯(或 Twig,或 Blade,或任何您正在使用的)然后必須被編輯以將該名稱轉換為實際的<img>
標簽以包含在表中。
您可以按照此處所述使用列渲染: https://datatables.net/examples/advanced_init/column_render.html
在你的情況下,這將是這樣的:
var dataTable = $("#example").DataTable({ processing: true, bSort: false, /*serverSide: true,*/ iDisplayLength: 10, /*"ajax": { "url": "json/jt.php", "type": "POST" },*/ columnDefs: [{ render: function(data, type, row) { return '<img src="https://flagcdn.com/16x12/' + data.toLowerCase() + '.png">'; }, targets: 1, }] });
<html> <head> <link href="//cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css" rel="stylesheet" /> </head> <body> <table id="example" class="display" style="width:100%"> <thead> <tr> <th>Types</th> <th>Country</th> <th>Infos</th> <th>Price</th> <th>E-Mail</th> </tr> </thead> <tbody> <tr> <td>Type A</td> <td>US</td> <td>Some info</td> <td>$1000,00</td> <td>someone@example.com</td> </tr> <tr> <td>Type B</td> <td>DE</td> <td>Some info</td> <td>€1000,00</td> <td>someone@example.com</td> </tr> <tr> <td>Type C</td> <td>GB</td> <td>Some info</td> <td>£1000,00</td> <td>someone@example.com</td> </tr> </tbody> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script> </body> </html>
對於此示例,我注釋掉了服務器端部分並使用了一些固定的 HTML 數據。 您可以刪除評論供您使用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.