Question

I have a page that my user interact with. They have to select around 200 rows from this table. But on average, 150 of those rows are usually pretty similar between users.

I want to add a couple of buttons that check those common rows for the user, that way they can then remove and add any remaining rows they want.

These buttons would either use a list from another file, or the list would be managed inside the jquery file. The list would contain the Name/Region/Category/Class of the rows I wanted to select.

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" media="screen" />
<script charset="utf8" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script charset="utf8" src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
</head>
</html>
  <body>
    <div class="container">
      <table id="samples" class="display nowrap compact hover dt-left" width="100%"></table>
    </table>
    </form>
<script type="text/javascript" charset="utf8" src="JS/datatables.js"></script>
</body>

jQuery

$(document).ready( function () {    
  var table = $('#samples').DataTable( { 
    "processing": true,
    "serverSide": false,
    "pageLength": -1,
    "lengthMenu": [[100, 250, 500, -1], [100, 250, 500, "All"]],
    ajax: "datatables.php",
    columns: [ 
      {data: '',
       defaultContent: '0',
       visible: false },
      {data: '',
       defaultContent: '',
       orderable: false,
       className: 'select-checkbox',
       targets:   1
      },
      {title : 'Sample Name', 'className': 'dt-left', data: 1},
      {title : 'Region/Program', 'className': 'dt-left', data: 2},
      {title : 'Class', 'className': 'dt-left', data: 3},
      {title : 'Category', 'className': 'dt-left', data: 4},
      {title : 'QC Concerns', 'className': 'dt-left', data: 5}
    ],
    select: {
        style:    'multi',
        },
    order: ([[ 4, 'asc' ], [ 5, 'asc' ], [ 3, 'asc' ]]),
    orderFixed: [0, 'desc'],
    dom: 'Bfrtip',
    buttons: [
     {
            extend: 'excel',
            text: '<span class="fa fa-file-excel-o"></span> Download (ALL) or (SELECTED)',
            exportOptions: {
                columns: [ 2, 5 ],
                modifier: {
                    search: 'applied',
                    order: 'applied'
                }
            }
        },
         {
            text: 'Use Selected Library',
            action: function ( e, dt, node, config) {
            alert( 'This buton needs to pass the Sample Name and Category columns to php.' );
            }

             },
         {
                text: 'Upload Predefined Library',
                action: function ( e, dt, node, conf ) {
                    alert( 'This button needs to allow a csv file to be uploaded and passed to php.' );
                }
         }

     ]
  } );

  table.on( 'select', function ( e, dt, type, indexes ) {
    if ( type === 'row' ) {
        var row = table.row( dt );
        table.cell({ row: row.index(), column: 0 } ).data( '1' );
        table.draw();
    }
  });

  table.on( 'deselect', function ( e, dt, type, indexes ) {
    if ( type === 'row' ) {
        var row = table.row( dt );
        table.cell({ row: row.index(), column: 0 } ).data( '0' );
        table.draw();
    }
  });

} );

Data sample

const srcData = [
    {Name: '752', Region: '7', Class : 'unknown', Category : 'unknown', QC_Concerns: 'yes'},
    {Name: 'North 5th', Region: 'NWA', Class : 'unknown', Category : 'square', QC_Concerns: 'yes'},  
    {Name: 'Elmdale', Region: '6', Class : 'back', Category : 'circle', QC_Concerns: ''},  
    {Name: 'Rosebud', Region: '7', Class : 'back', Category : 'triangle', QC_Concerns: ''},
    {Name: 'Letterkenny', Region: 'GO', Class : 'back', Category : 'square', QC_Concerns: ''},
    {Name: '632nd', Region: 'GO', Class : 'front', Category : 'ball', QC_Concerns: ''},
    {Name: 'Water', Region: '4', Class : 'front', Category : 'ball', QC_Concerns: ''},
    {Name: 'Dirt', Region: '1', Class : 'front', Category : 'mermaid', QC_Concerns: ''},
    ];

Selecting rows based on pre-made list in Jquery DataTables

0 个答案: