CODEWITHSUNDEEP
javascripttwitter-bootstrapbootstrap-table
balderman
balderman

Reputation: 23815

Using bootstrap table with input fields

I am using bootstrap table.

My table contains cells that contains input fields.

When the user changes the value of an input field I need to do the following in order to keep the table sorted.

  1. "Ask" the table if the input field that was just changed belongs to the column that the table is sorted by.

  2. If the answer to question number 1 is true, I need to "tell" the table to sort the rows.

My questions are:

Code snippet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>


    <title>sorted table</title>
</head>
<body>

<span>A Bootstrap table</span>

<table id="my_table_1" data-toggle="table" data-sort-stable="true">
    <thead>
    <tr>
        <th data-sortable="true">A</th>
        <th data-sortable="true">B</th>
        <th data-sortable="true">C</th>
        <th data-sortable="false">D</th>
    </tr>
    </thead>
   <tbody>
        <tr>
            <td>1</td>
            <td><select>
                <option val="112">A</option>
                <option val="2">B</option>
                <option val="356" selected>C</option>
            </select>
            </td>
            <td><input type="date" value="2018-07-22"></td>
            <td><input type="checkbox"></td>
        </tr>
        <tr>
            <td>123</td>
            <td><select>
                <option val="1" selected>A</option>
                <option val="2">B</option>
                <option val="3">C</option>
            </select>
            </td>
            <td><input type="date" value="2014-07-22"></td>
            <td><input type="checkbox"></td>
        </tr>

        <tr>
            <td>56</td>
            <td><select>
                <option val="1">A</option>
                <option val="2" selected>B</option>
                <option val="3">C</option>

            </select>
            </td>
            <td><input type="date" value="2014-08-23"></td>
            <td><input type="checkbox"></td>
        </tr>

        <tr>
            <td>14</td>
            <td><select>
                <option val="1">A</option>
                <option val="2" selected>B</option>
                <option val="3">C</option>

            </select>
            </td>
            <td><input type="date" value="2014-07-23"></td>
            <td><input type="checkbox"></td>
        </tr>
        </tbody>
</table>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
          console.log('ready');
          $('#my_table_1').find('input[type="date"]').change(function() {
            console.log('Table 1.Date was changed. Need to check if table is sorted by column C.If so - call the table sort.');
          });
          $('#my_table_1').find('select').change(function() {
            console.log('Table 1.Selection was changed. Need to check if table is sorted by column B.If so - call the table sort.');
          });
         });
    </script>

</body>
</html>

Thanks

Upvotes: 1

Views: 24378

Answers (1)

wenyi
wenyi

Reputation: 1384

Same as #987, you need to call updateRow to save the change to the table data: https://live.bootstrap-table.com/code/wenzhixin/737.

Upvotes: 1

Related Questions