How to add flags for each country in datatables-CodePudding

Here is my javascript with flags

<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>

Here is the file j-t.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);

here is my database

SELECT * FROM `info` WHERE `country` LIKE 'CA' ORDER BY `date_added` DESC

I need to add in Datatables just like contry name CA US DE GB etc... i like to add with flags and Country name in Datatable Country row

CodePudding user response：

You could download all of the SVG flags from a place like this ...

https://observablehq.com/@slattery/iso-3166-svg-flags

... then add a column to your database that includes the name associated with your flag file, using an ALTER TABLE info ADD COLUMN query, followed by a bunch of UPDATE queries.

Your PHP logic (or Twig, or Blade, or whatever you're using) would then convert that name into an actual <img> tag for inclusion in the table.

CodePudding user response：

You can use column rendering as described here: https://datatables.net/examples/advanced_init/column_render.html

In your case that would be something like:

var dataTable = $("#example").DataTable({
  processing: true,
  bSort: false,
  /*serverSide: true,*/
  iDisplayLength: 10,
  /*"ajax": {
    "url": "json/j-t.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"  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>[email protected]</td>
      </tr>
      <tr>
        <td>Type B</td>
        <td>DE</td>
        <td>Some info</td>
        <td>&euro;1000,00</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Type C</td>
        <td>GB</td>
        <td>Some info</td>
        <td>&pound;1000,00</td>
        <td>[email protected]</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>

For this example I commented out the server-side part and used some fixed HTML data. You can remove the comments for your use.