Accessing database to create list with pre-populated dropdown or custom option php html jquery sql datatables

问题

EDIT: Thanks to @Justinas I at least have a starting direction on this...

I want to have a webpage that displays an entire sql database table. I want to be able to sort the list by the values in each column if the user clicks on the column header.

I also need a checkbox next to each row in order to select that item to "move forward"

If an item is checked, a div dropdown would show up pre-populated with options from one of the database columns (Class). a second div dropdown would be the same for a different column of data (Category) but there would also be a "custom" option which would cause a div input to be displayed where the user can type in what they want. The dropdown div's default values would be the Class or Category that was stored in the db table.

From there, all of that selected/defined data would be stored into an output file. A csv with the format Name, Class, Category

Here is a scratch drawing of what is in my mind:

I'm not sure how to even begin having dropdowns created/populated when a checkbox is set, and from there how do you pass the data to an output file?

starting code below - This displays the table data(600 rows)

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/datatables.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>
</head>
</html>
<body>
<table id="samples" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Sample Name</th>
                <th>Region</th>
                <th>Class</th>
                <th>Category</th>
                <th>QC_flag</th>
                <th>QC_comment</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Sample Name</th>
                <th>Region</th>
                <th>Class</th>
                <th>Category</th>
                <th>QC_flag</th>
                <th>QC_comment</th>
            </tr>
        </tfoot>
    </table>
    </form>
<script type="text/javascript" charset="utf8" src="JS/datatables.js"></script>
</body>

JQuery

$(document).ready(function() {

    $('#samples').DataTable( {

        "processing": true,

        "serverSide": true,

        "ajax": "datatables.php"

    } );

} );

PHP

<?php

$table = 'sample';
$primaryKey = 'Name';

$columns = array(
    array( 'db' => 'Name', 'dt' => 0 ),
    array( 'db' => 'Region', 'dt' => 1 ),
    array( 'db' => 'Class', 'dt' => 2 ),
    array( 'db' => 'Category', 'dt' => 3 ),
    array( 'db' => 'QC_flag','dt' => 4,),
    array('db'  => 'QC_comment','dt' => 5,)
);

// SQL server connection information
$sql_details = array(
    'user' => 'user',
    'pass' => 'password',
    'db'   => 'test',
    'host' => 'xxx.xx.xxx.xx'
);


require( 'ssp.class.php' );

echo json_encode(
    SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);

CSS

https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css

SSP

https://github.com/DataTables/DataTables/blob/master/examples/server_side/scripts/ssp.class.php

来源：https://stackoverflow.com/questions/55145299/accessing-database-to-create-list-with-pre-populated-dropdown-or-custom-option-p

标签

php

jquery

html

sql

datatables