How to search in datatable and get only the cell searched?

Navigation
5

I want to search your search engine and get only the cell you are looking for, not the whole row, what I want to achieve is equal to this link the list of users is in a table. 

    $(document).ready(function() {
        var table = $('#example').DataTable();
      var table = $('#example').DataTable();
var data = table.cell('#cell-1-1').data();
     
        $('#example tbody').on( 'click', 'td', function () {
            if ( $(this).hasClass('selected') ) {
              
                $(this).removeClass('selected');
            }
            else {
                table.$('td.selected').removeClass('selected');
             
                $(this).addClass('selected');
            }
        } );
     
        $('#button').click( function () {
            table.row('.selected').remove().draw( false );
        } );
    } );
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <button id="button">Eliminar Seleccion</button>
    <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th class="user">Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$86,000</td>
                </tr>
                <tr>
                    <td>Cedric Kelly</td>
                    <td>Senior Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2012/03/29</td>
                    <td>$433,060</td>
                </tr>
                <tr>
                    <td>Airi Satou</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>33</td>
                    <td>2008/11/28</td>
                    <td>$162,700</td>
                </tr>
                <tr>
                    <td>Brielle Williamson</td>
                    <td>Integration Specialist</td>
                    <td>New York</td>
                    <td>61</td>
                    <td>2012/12/02</td>
                    <td>$372,000</td>
                </tr>
               
            </tbody>
        </table>
    
asked by hubman 26.01.2017 в 04:41
source

2 answers

7

I think you're comparing some oranges and apples. Yes, both are tables and both use JavaScript to update and search ... but neither its content nor its organization are comparable.

In the StackOverflow user table, the cells are independent since neither the rows nor the columns have any relation (that two users appear in the same or different row / column does not indicate absolutely nothing). In contrast, in the DataTable that you present the cells are "dependent": all the cells of a row are related (it is information of the same record) and all the cells of a column are also related (because they represent the same data).

So, that of " getting only the cell searched " in the same way as the example you want to emulate, is not really an option with that DataTable (because at least the data should be kept in the same column so that it does not stop making sense).

The closest thing I could think of would be to hide the contents of the cells that do not meet the search condition, while keeping the cells that do comply with it still visible. In this way, the cell that meets the search criteria will still be kept under the corresponding column header and you will be able to know what it represents.

This could be done by reading the event handler drawn ( draw ) of the DataTable. That event is launched after the DataTable has been drawn (or redrawn) such as paging, searching, or filtering through a field.

Here I leave a commented demonstration: 

$(document).ready(function() {
  var table = $('#example').DataTable();

  // cuando se redibuje la table
  table.on( 'draw', function ( e, settings, details ) {
    // seleccionamos la tabla y el valor a buscar
    var $e = $("#example");
    var buscar = $e.parent().find("input").val().toLowerCase().trim();
    
    // ponemos todas las celdas con su color original
    $e.find("td").css("opacity", "1");
    
    // si hay una cadena de busqueda
    if (buscar != "") {
      // buscamos entre todas las celdas visibles
      $e.find("td").each(function() {
        // las que no tengan la cadena buscada
        if ($(this).text().toLowerCase().indexOf(buscar) < 0) {
          // su texto se hara transparente
          $(this).css("opacity", "0");
        }
      });
    }
  });


  var data = table.cell('#cell-1-1').data();

  $('#example tbody').on( 'click', 'td', function () {
    if ( $(this).hasClass('selected') ) {
      $(this).removeClass('selected');
    }
    else {
      table.$('td.selected').removeClass('selected');
      $(this).addClass('selected');
    }
  } );

  $('#button').click( function () {
    table.row('.selected').remove().draw( false );
  } );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<button id="button">Eliminar Seleccion</button>
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th class="user">Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
<tr>
      <td>Brielle Williamson Junior</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>41</td>
      <td>2012/12/02</td>
      <td>$272,000</td>
    </tr>
    <tr>
      <td>Brielle Williamson III</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>21</td>
      <td>2012/12/02</td>
      <td>$172,000</td>
    </tr>
    <tr>
      <td>Brielle Williamson IV</td>
      <td>Mascot</td>
      <td>New York</td>
      <td>1</td>
      <td>2012/12/02</td>
      <td>$0</td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>Software Developer</td>
      <td>Austin</td>
      <td>45</td>
      <td>2014/11/12</td>
      <td>$172,000</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>QA Engineer</td>
      <td>Dallas</td>
      <td>31</td>
      <td>2016/11/01</td>
      <td>$144,500</td>
    </tr>
    <tr>
      <td>Bill Gates</td>
      <td>CEO</td>
      <td>Redmond</td>
      <td>67</td>
      <td>2016/11/01</td>
      <td>$144,500</td>
    </tr>
  </tbody>
</table>

Editing: If you want to do it the closest thing to StackOverflow, you can change the CSS to suit what you are looking for, but you will really lose much of the functionality that DataTables offer you.

The idea would be the following:

  • Remove the header and footer
  • Make row rows show up online ( inline-block )
  • Make the cells occupy 100% of each row (with block )
  • Give the rows a width so that there are as many as you want in each line.
  • Make them show only multiples of the number of rows per line (with pageLength )

The result would look like this: 

$(document).ready(function() {
  var table = $('#example').DataTable({ pageLength: 9 });

  var data = table.cell('#cell-1-1').data();

  $('#example tbody').on( 'click', 'td', function () {
    if ( $(this).hasClass('selected') ) {
      $(this).removeClass('selected');
    }
    else {
      table.$('td.selected').removeClass('selected');
      $(this).addClass('selected');
    }
  } );

  $('#button').click( function () {
    table.row('.selected').remove().draw( false );
  } );
} );
thead, tfoot { display:none !important; }

tbody tr {
  display:inline-block;
  width:31%;
  margin:1%;
  border:1px solid black;
}

tbody tr td {
  display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<button id="button">Eliminar Seleccion</button>
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th class="user">Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td>Brielle Williamson Junior</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>41</td>
      <td>2012/12/02</td>
      <td>$272,000</td>
    </tr>
    <tr>
      <td>Brielle Williamson III</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>21</td>
      <td>2012/12/02</td>
      <td>$172,000</td>
    </tr>
    <tr>
      <td>Brielle Williamson IV</td>
      <td>Mascot</td>
      <td>New York</td>
      <td>1</td>
      <td>2012/12/02</td>
      <td>$0</td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>Software Developer</td>
      <td>Austin</td>
      <td>45</td>
      <td>2014/11/12</td>
      <td>$172,000</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>QA Engineer</td>
      <td>Dallas</td>
      <td>31</td>
      <td>2016/11/01</td>
      <td>$144,500</td>
    </tr>
    <tr>
      <td>Bill Gates</td>
      <td>CEO</td>
      <td>Redmond</td>
      <td>67</td>
      <td>2016/11/01</td>
      <td>$144,500</td>
    </tr>
  </tbody>
</table>
    
answered by 11.02.2017 / 06:42
source
2

Good afternoon I with dataTable do it this way to recover the data of the selected rows. 

table.rows(".selected").data()

Here you have more documentation about it: link

    
answered by 26.01.2017 в 13:29
Add divs around another div Is there a way to make a screenshot using javascript?