dimanche 4 novembre 2018

jquery select all with datatable connected with json

I have the following table:

 <table class="datatable" id="table_cards">
    <thead>
      <tr>
        <th><input type="checkbox" name="select_all" value="1" id="example-select-all"> All</th>
        <th>Sale</th>
        <th>#</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>ADDITIONAL Note</th>
        <th>Functions</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

And the following jquery for this table:

 var table_cards = $('#table_cards').dataTable({
"ajax": "data.php?job=get_cards",
"columns": [
  { "data": "checkboxes" },
  { "data": "forsale" },
  { "data": "quantity" },
  { "data": "cardname",   "sClass": "cardname" },
  { "data": "edition" },
  { "data": "editionicon"},
  { "data": "price", "sClass": "integer"},
  { "data": "cond"},
  { "data": "cardlanguage"},
  { "data": "foil" },
  { "data": "note" },
  { "data": "functions",   "sClass": "functions" }
],

"aoColumnDefs": [

  {
     'targets': 0,
     'searchable':false,
     'orderable':false,
     'width':'1%',
     'className': 'dt-body-center',
     'render': function (data, type, full, meta){
         return '<input type="checkbox">';
     }},

  { "bSortable": false, "aTargets": [-1] }
],
"select": {style: "multi"},

"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"oLanguage": {
  "sSearch": "<label id='has-tt-label' for='has-tt' title='Some <b>great</b> input!'>Search: </label>", //search

  "oPaginate": {
    "sFirst":       " ",
    "sPrevious":    " ",
    "sNext":        " ",
    "sLast":        " ",
  },
  "sLengthMenu":    "Records per page: _MENU_",
  "sInfo":          "Total of _TOTAL_ records (showing _START_ to _END_)",
  "sInfoFiltered":  "(filtered from _MAX_ total records)"
} });

And the following data.php

 $query = "SELECT * FROM cards ORDER BY cardname";
$query = mysqli_query($conn, $query);
if (!$query){
  $result  = 'error';
  $message = 'query error';
} else {
  $result  = 'success';
  $message = 'query success';
  while ($card = mysqli_fetch_array($query)){

    $checkboxes = '<div><ul><input type="checkbox" name="'.$card['id'].'" value="'.$card['id'].'"></ul></div>';
    if ($card['forsale'] == "0") {$forsale ='<div style="vertical-align:middle;"><img src="hold.png"></div>'; } else {$forsale = '<img src="sell.png">'; }
 //  $editionicon = '<img src="images/sets/'.$card['editionc'].'-'.$card['rarity'].'.jpg" title="'; if($card['rarity'] == "C") { $editionicon .= 'COMMON" >'; } elseif ($card['rarity'] == "U") { $editionicon .= 'UNCOMMON" >';} elseif ($card['rarity'] =="R") {$editionicon .= 'RARE" >';} 
   $editionicon = '<img src="images/sets/'.$card['editionc'].'-'.$card['rarity'].'.jpg">';

    if ($card['foil'] == "Foil") {$foil = '<div style="vertical-align:middle;">'.$card['foilq'].' x <img src="foil.png"></div>'; } else {$foil = ''; }

    $functions  = '<div class="function_buttons"><ul>';
    $functions .= '<li class="function_edit"><a data-id="'   . $card['id'] . '" data-name="' . $card['cardname'] . '"><span>Edit</span></a></li>';
    $functions .= '<li class="function_delete"><a data-id="' . $card['id'] . '" data-name="' . $card['cardname'] . '"><span>Delete</span></a></li>';
    $functions .= '</ul></div>';

    $mysql_data[] = array(
      "checkboxes"    => '',
      "forsale"       => $forsale,
      "cardname"      => $card['cardname'],
      "edition"       => $card['edition'],
      "rarity"        => $card['rarity'],
      "editionicon"   => $editionicon,
      "price"         => $card['price'],
      "quantity"      => $card['quantity'],
      "cardlanguage"  => $card['cardlanguage'],
      "cond"          => $card['cond'],
      "foil"          => $foil,
      "foilq"         => $card['foilq'],
      "note"          => $card['note'],
      "functions"     => $functions
    );
  }

what I need now is a button that checks all checkboxes at all pages within the pagination.

can Someone help please? I read and tried to use this: https://www.gyrocode.com/articles/jquery-datatables-how-to-add-a-checkbox-column/ but I was not able to edit it so it would work with my table.

best greetings and thank you in advance!




Aucun commentaire:

Enregistrer un commentaire