Question 40850 in PHP Question posted in
Official manual can be found here.

How to add flags for each country in datatables – PHP

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

Tags:

2

Answers


  1. 0

    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 have to be edited to convert that name into an actual <img> tag for inclusion in the table.

    Login or Signup to reply.
  2. 0

    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" 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>[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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search