Datatables select

by Wolfgang Fahl

HTML

<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" type="text/css">


    <title>Datatables sample</title>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.23/b-1.6.5/b-html5-1.6.5/r-2.2.7/sb-1.0.1/sl-1.3.1/datatables.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.23/b-1.6.5/b-html5-1.6.5/r-2.2.7/sb-1.0.1/sl-1.3.1/datatables.min.js"></script>
  </head>

  <body>
    <form action="" method="post" class="form" role="form">
      <input id="csrf_token" name="csrf_token" type="hidden" value="IjA5Y2MyMjlkZWU3ZWM1NTIxOWJjNWFkYTU0Y2ZhMWYwNjI1MDA1ZDEi.YBgsMQ.jlqiA_e02qwQm6Ej_9vTv1_bcrg">
      <textarea id="queryTableSelection"  rows="4" cols="60"/></textarea>
      <textarea id="actionTableSelection"  rows="4" cols="60"/></textarea>
      <input class="btn btn-primary btn-sm" id="submit" name="submit" type="submit" value="execute">

    </form>
    <h3>
      select a query
    </h3>
    <table id="queryTable" class="table table-bordered table-hover">
      <!-- table header -->

      <thead class="thead-light">
        <tr>
          <th>#</th>

          <th> Sourcecode </th>

          <th> id </th>

        ...

JavaScript

$(document).ready(function() {
    	var table=$('.table').DataTable({
    		select: {
        		style: 'single'
    		}
		});
		table.on( 'select', function ( e, dt, type, indexes ) {
			var targetTableId=e.target.id;
	    var stable = $('#'+targetTableId).DataTable();
			var rowData = stable.row( indexes ).data();
			var jsonSelect=JSON.stringify(rowData);
      var selector='#'+targetTableId+'Selection';
      alert(selector);
      $(selector).val(jsonSelect);
      // $('#actionSelection").val(jsonSelect);
      // alert(jsonSelect);
		} );
	});