簡體   English   中英

如何在數據表中為每個國家添加標志

[英]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>&euro;1000,00</td> <td>someone@example.com</td> </tr> <tr> <td>Type C</td> <td>GB</td> <td>Some info</td> <td>&pound;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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM