0

I am trying the following code to have each td or each row be movable, such as drag and drop. It seems like its not accepting the jQuery any suggestions?

I have tried doing all the code in one page and it is still not working

<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
    <title>
      Jomana Sherif Presentation
    </title>
<link rel="stylesheet" type="text/css" href="first.css">
<!-- 
    <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
 -->

<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<script src="first.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> </link>
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
  #sortedtable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortedtable td { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortedtable ld{ position: absolute; margin-left: -1.3em; }
  </style>
  <script>
  $(function() {
    $( "#sortedtable" ).sortable();
    $( "#sortedtable" ).disableSelection();
  });
  </script>
  </head>
  <body bgcolor="#E6E6FA">
<?php

if(!$link = mysql_connect("localhost", "root", "")) {
     echo "Cannot connect to db server";
}
elseif(!mysql_select_db("Disney")) {
     echo "Cannot select database";
}
else {
     if(!$rs = mysql_query("SELECT * FROM DisneyCharacters")) {
          echo "Cannot parse query";
     }
     elseif(mysql_num_rows($rs) == 0) {
          echo "No records found";
     }
     else {
          echo "<table id=\"sortedtable\" class=\"bordered\" cellspacing=\"0\">\n";
          echo "<thead>\n<tr>";
          echo "<th>Name  </th>";
          echo "<th>Movie  </th>";
          echo "<th>Year  </th>";
          echo "</tr>\n</thead>\n";

          while($row = mysql_fetch_array($rs)) {
               echo "<tr>";
  echo "<td>" . $row['Name'] . "</td>";
  echo "<td>" . $row['Movie'] . "</td>";
  echo "<td>" . $row['Year'] . "</td>";

  echo "</tr>";

          }
          echo "</table><br />\n";
     }

}
?>

    </body>


</html>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user3474037
  • 23
  • 1
  • 7

2 Answers2

0

You need to place your sortable initializer code into $(document).ready block. Currently it is being executed before the table is rendered on the page:

<script>
$(document).ready(function () {
  $(function() {
    $( "#sortedtable" ).sortable();
    $( "#sortedtable" ).disableSelection();
  });
});
</script>
mesutozer
  • 2,839
  • 1
  • 12
  • 13
  • it moves the whole block not each td separately, is there a way i can do that? Thank you for all your help – user3474037 Mar 28 '14 at 19:44
  • This will be a guess: Try to enclose your rows within `` and place sortable on tbody as described here http://stackoverflow.com/questions/11470775/using-jquery-ui-sortable-with-html-tables – mesutozer Mar 28 '14 at 19:50
  • Thank you so much!!! i really appreciate all your efforts it worked :)))). I have one more question in my code above as you can see I have commented out jquery-1.3.1.min.js, But i need it when i click on name and movie and year in order to sort, but i also need the drag and drop in 1.10.4/jquery-ui.js. Is there any way I can have both so i can sort by clicking on the header and then drag and drop? – user3474037 Mar 28 '14 at 19:55
  • But now my sorting does not work when i uncomment jquery-1.3.1.min.js – user3474037 Mar 28 '14 at 19:58
  • Hi, If you could help me with this one, it would be great. Thank you http://stackoverflow.com/questions/22733499/drag-and-dropping-columns-php-js-how-can-that-be-done – user3474037 Mar 29 '14 at 16:21
  • Hi may you please help me with this one http://stackoverflow.com/questions/22739631/sticky-header-with-php-content-for-scrollable-40-lines-of-header?noredirect=1#comment34680422_22739631 – user3474037 Mar 31 '14 at 02:10
0

Try This:

$(document).ready(function(){
 $( "#sortedtable" ).tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
 $( "tbody" ).sortable();
 $( "tbody" ).disableSelection();
});

Working fiddle: http://jsfiddle.net/robertrozas/LXjm6/

----------------------------------EDIT-------------------------------------------

Inside your head tags:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
Hackerman
  • 12,139
  • 2
  • 34
  • 45