Search jQuery

jQuery Forum

Table Edit

in Getting Started • 8 years ago

Hello everyone. I need a plugin recommendation/help please. I am using jquery, tabletools, and tablesorter and having a pretty nice looking table. One of my entries is a foreign key which is displaying perfectly but I would like to be able to display it as a drop down box to quickly update a status. Any help or recommendations would be much appreciated. Thank you

P.S. Examples would be fantastic as well as I am very new to all of this.

Replies(5)

charlietfl

Re: Table Edit

8 years ago

Post a link to a working page along with a better explanation of what you are wanting.

"foreign key" is db field property , hard to follow what that means in html terms, or how it needs to be turned into a dropdown. Also have no idea what "update status" means to you.

Am familiar with tablesorter plugin, but the only tabletools plugin I know of works with a completely different table system called datatables.js

tfuller82

Re: Table Edit

8 years ago

Thank you for the reply. I can't find a working example of exactly what I'm looking for, however, hopefully I can explain it a little better. I have a table that is comprised of foreign keys from 6 other tables. Here is the code for the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Table</title>
<style type="text/css" title="currentStyle">
@import "media/css/TableTools.css";
</style>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript" charset="utf-8" src="media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8" src="media/ZeroClipboard/ZeroClipboard.js"></script>
<script type="text/javascript" charset="utf-8" src="media/js/TableTools.js"></script>
<script language="JavaScript" src="js/jquery.columnfilters.js"></script>
<script type="text/javascript">
    $(function()
         {
                $("#myTable").tablesorter();
            }
        );
</script>
<script type="text/javascript">
$(document).ready(function() {
    $("table").tablesorter();
    $('table tr').has(':not(th)').hover(
        function(){
            $(this).data('currColor',$(this).css('background-color'));
            $(this).css('background-color','#cdd');
        },
        function(){
            $(this).css('background-color',$(this).data('currColor'));
        }
    );
});
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
  $('#myTable').dataTable( {
   "sDom": 'T<"clear">lfrtip'
   } );
   } );
</script>
<script>
$(document).ready(function() {
$('table#myTable').columnFilters({alternateRowClassNames:['rowa','rowb']});
});
</script>

<link rel="stylesheet" href="css/blue/style.css" type="text/css" />
</head>
<?php
$db = new mysqli("localhost", "test", "test", "Project_Development");
$query = "SELECT Assemblies.Assembly
     , Projects.Project AS Project
     , Ditmco_Programming_Status.Programming_Status
     , Ditmco_Harness_Status.Harness_Status
     , Torque_Programming_Status.Programming_Status
     , Torque_Adapter_Status.Adapter_Status
     , Tooling_Status.Tooling
FROM
Project_Has_Assembly
INNER JOIN Assemblies
ON Project_Has_Assembly.Assembly = Assemblies.id_Assembly
INNER JOIN Projects
ON Assemblies.Project = Projects.id_Project AND Project_Has_Assembly.Project = Projects.id_Project
INNER JOIN Ditmco_Harness_Status
ON Assemblies.Ditmco_Harnesses = Ditmco_Harness_Status.id_Harness_Status
INNER JOIN Ditmco_Programming_Status
ON Assemblies.Ditmco_Programming = Ditmco_Programming_Status.id_Programming_Status
INNER JOIN Torque_Programming_Status
ON Assemblies.Torque_Program = Torque_Programming_Status.id_Programming_Status
INNER JOIN Torque_Adapter_Status
ON Assemblies.Torque_Adapters = Torque_Adapter_Status.id_Adapter_Status
INNER JOIN Tooling_Status
ON Assemblies.Tooling = Tooling_Status.id_Tooling";
$result = $db->query($query, MYSQLI_STORE_RESULT);
$o = '<table id="myTable" class="tablesorter"><thead><tr><th>Project</th><th>Assembly</th><th>Ditmco Program</th><th>Ditmco Harnesses</th><th>Torque Program</th><th>Torque Adapters</th><th>Tooling</th></tr></thead><tbody>';
while(list($project, $assembly, $ditstat, $ditharn, $torquestat, $torqueadapter, $tooling) = $result->fetch_row()) {
$o .= '<tr><td>'.$project.'</td><td>'.$assembly.'</td><td>'.$ditstat.'</td><td>'.$ditharn.'</td><td>'.$torquestat.'</td><td>'.$torqueadapter.'</td><td>'.$tooling.'</td></tr>';
}
$o .= '</tbody></table>';
echo $o;
?>
</html>

Each one of the joins is a status code for where an assembly is currently at. I would like to make the table editable and insert a drop down box. in the pertaining fields that can be updated on the fly. RIght now my table is only viewable. I hope this helps explain what I am after.

charlietfl

Re: Table Edit

8 years ago

Table sorter on top of datatables seems like asking for problems since datatables does all that tablesorter does and a lot more.

For editing there is an editable demo on datatables site using jEditable plugin

http://datatables.net/release-datatables/examples/api/editable.html

Not sure where your dropdown comes into play. You can have datatables create dropdown filters for any column. The dropdown will include all unique values in a column.

If the dropdown is intended for individual cells you can create select elements with the jEditable API

tfuller82

Re: Table Edit

8 years ago

Thank you for the reply. This definitely seems to be the plugin I am looking for. I dropped tablesorter and am strictly using datatables. I have installed jeditable but am currently trying to learn it. If anyone is pretty familiar with this plugin and can help me insert a drop down for a specific column to update a table I would very much appreciate it. In the meantime I will continue to google. Thanks again.

tfuller82

Re: Table Edit

8 years ago

Ok. I am at a loss as to how to get this to work. I normally like to figure things out on my own but it seems as if I need a little bit of hand holding here. If someone has the time to help me out or knows of a really good example I would really appreciate it. I can implement jeditable as per the example on their page but I'm not sure what should be in the php script that would update the database, as in I don't know how the data is passed from the page to the php. Also, with their example it makes every column editable with a text box. I have no idea how I could just make one column editable via a drop down. I know I'm asking for a lot here. Thanks to anyone who can help me out.

Top Reply

Response title

Attachments

jQuery Forum

Table Edit

Replies(5)

Re: Table Edit

Re: Table Edit

Re: Table Edit

Re: Table Edit

Re: Table Edit

Statistics

Tags

Actions