How to do CRUD on a bootstrap table

Question

How to do CRUD on a bootstrap table

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I am using the bootstrap table, I have seen an example where this table can be edited. I tried to edit the table with PHP and MySQL but I do not get results.

I've looked at this documentation but I do not get the desired results, I can see the data but not edit it.

my code

<table data-pagination="true" data-search="true"
                              data-toggle="table"
                              data-url="controller/fetch.php"
                              data-pagination="true"
                              data-editable-url="controller/update.php">
             <thead>
                  <tr>
                   <th id="code" data-sortable="true" data-field="Code" >Code</th>
                   <th id="name" data-editable="true" data-field="Name">Name </th>
                   <th id="mail" data-field="Mail" data-editable="true">Mail</th>
                 </tr>
            </thead>
</table>

javascritps

$('#name').editable({
                container: 'body',
                selector: 'td.Name',
                url: "controller/update.php",
                title: 'Employee Name',
                type: "POST",
                dataType: 'json',
                validate: function(value) {
                    if ($.trim(value) == '') {
                        return 'This field is required';
                    }
                }
            });

PHP

<?php
$query = "
 UPDATE personal SET ".$_POST["name"]." = '".$_POST["value"]."'
 WHERE Code = '".$_POST["pk"]."'";
mysqli_query($conn, $query);
?>

I hope to have explained myself well and if someone has the way to do the editing I would appreciate the help a lot.

javascript php json bootstrap-table

asked by MoteCL 28.08.2018 в 13:50

source

2 answers

shadowbox on labels created by javascript code Modify class name with XPATH

score 0 · Answer 1

Here is an example below. To start using bootstrap version 4.x It would be necessary to start reading the library documentation

link

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-dark" data-pagination="true" data-search="true"
                              data-toggle="table"
                              data-url="controller/fetch.php"
                              data-pagination="true"
                              data-editable-url="controller/update.php">
             <thead>
                  <tr>
                   <th id="code" data-sortable="true" data-field="Code" >Code</th>
                   <th id="name" data-editable="true" data-field="Name">Name </th>
                   <th id="mail" data-field="Mail" data-editable="true">Mail</th>
                 </tr>
            </thead>
            <tbody>
            <tr>
             <td>1</td>
             <td>Pedro</td>
             <td>[email protected]</td>
            </tr>
            </tbody>
</table>

score 0 · Answer 2

You can review this plugin use it and it worked for me here you have the results :

//This will make all the table cells editable.
$('table').SetEditable();

//If you want to specify the table columns to be editable.
/*$('table').SetEditable({
  columnsEd: "0,1"
});*/

//Event handlers available.
/*$('table').SetEditable({
  onEdit: function() {},
  onDelete: function() {},
  onBeforeDelete: function() {},
  onAdd: function() {}
});*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://www.jqueryscript.net/demo/Editable-Tables-jQuery-Bootstrap-Bootstable/bootstable.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<table class="table" id="table"
  data-url="data/url.json"
  data-id-field="id"
  data-editable-emptytext="Default empty text."
  data-editable-url="/my/editable/update/path">
  <thead>
    <tr>
      <th class="col-md-1" data-field="id" data-sortable="true" data-align="center">#</th>
      <th class="col-md-4" data-field="name" data-editable="true">Name</th>
      <th class="col-md-7" data-field="description" data-editable="true" data-editable-emptytext="Custom empty text.">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Pedro</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>