Crud with Edit inside the Own table and search for data + database

Question

Could someone tell me how to make a CRUD with editing by the table itself ? Detail this table has to be linked in a database, I did it in PHP with Search, got ball show, but my boss did not want, he wants something simpler to the user,

the person enters the page where the data is displayed click on the table cell, edit the wrong data and READY, save the data from it, can not have buttons or redirect to other pages, all on a page only...to breaking my head, I tried to do in JQUERY but I will be honest I do not know link with my database and nor do the search.

I know a little PHP, but it wasn’t enough.

Someone could teach me, show me a video, show me codes anything help, job may be at stake.

Answer 1

There is a lib called Bootstrap Table, i use in all my projects, I think it is well documented and easy to use, there is an extension of it that has exactly what you want here. I will leave an example of the implementation of lib normal, I never used this extension to edit the information directly from the cells.

First you create a table and give a id for her:

              <table class="table" id="table">
                <thead>
                  <tr>
                    <th data-field="id" data-visible="false">ID</th>                       
                    </tr>
                  </thead>
                </table>

That one data-field will be the name of the attribute the table will receive. For example, you return a json with the list of persons, and the personal object in its php will probably have a id, putting data-field="id" you’re saying that in that column will be the id of the person.

Java Scrpit:

$("#table").bootstrapTable({
  ajax: urlQueVaiDevolverAListaDeJson,
  search: true, // se true, cria cria um campo de busca, e implementa a busca sozinho
  sidePagination: "client",
  pageSize: 5, // quantidade de itens por pagina.
  pagination: true // se true, cria uma paginação por você
});

Anyway.. That’s it.. That’s the basics on the bootstrap table, she does a lot for you.. search.. paging.. and etc. I suggest you study her, and the extension that has what you want.