Jquery短分页

Question

我是jquery的新手我被困在表数据的排序中是通过ajax方法从数据库中提出的问题是＆＃34;我已经完成了排序但是当我点击下一页时需要数据不排序＆＃34;我希望当我对下一页数据进行排序时

＆＃13;

＆＃13;

$(document).ready(function() {
    $("#sub").click(function(e) {
        e.preventDefault();
        var name = $('#name').val();
        var email = $('#email').val();
        var pattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i
        var message = $('#msg').val();
        var date = $('#date').val();
        if (name != '' && email != '' && message != '' && date != '') {
            alert("submit");
            $("#name").val("");
            $("#email").val("");
            $("#msg").val("");
            $("#date").val("");
        }
        else if (!name) {
            alert("please enter name")
        } else if (!email) {
          console.log(email);
            alert("please enter email")
        } else if (!pattern.test(email)) {
            alert("please enter valid email address");
        } else if (!message) {
            alert("please enter message")
        } else if (!date) {
            alert("please select date")
        }
        $.ajax({
            context: document.body,
            type: "POST",
            url: "insert.php",
            data: {
                "name": name,
                "email": email,
                "message": message,
                "date": date
            },
            success: function(data) {

            }
        });
    });
	setTimeout(function () {
		fetchData();
	}, 2000); // this will call your fetchData function for every 10 Sec.
	var sta = 0;
  var len2=10
	var len = 0;
	var limit = 3;
  var total_pages=len/limit;
  console.log('total_pages');
	function fetchData() {
		$.ajax({
			type: 'POST',
			url: 'fetch.php',
			dataType: "json", //to parse string into JSON object,
			success: function (data) {
				console.log();
				if (data) {
					$("#table tbody").empty();
					var txt = "";
					len = data.length;
					console.log(data.length)
					var txt = "";
					var start = sta;
					var endpoint = start + limit;
					if (len > 0) {
						for (var i = start; i < data.length; i++) {
							if (i < endpoint) {
								if (data[i].name && data[i].email && data[i].message && data[i].date) {
									txt += "<tr><td>" + data[i].name + "</td><td>" + data[i].email + "</td><td>" + data[i].message + "</td><td>" + data[i].date + "</td></tr>";
console.log(data[i]);
                }

							}
						}
						if (txt != "") {
							$("#table ").append(txt);
						}
					}
				}
			},
			error: function (jqXHR, textStatus, errorThrown) {
				alert('error: ' + textStatus + ': ' + errorThrown);
			}
		});
		return false;
	}
	$('#nextValue').click(function () {
		//sta = sta + limit;
		//fetchData();
var rowCount = $('#table td').length;
console.log(rowCount);
if
(rowCount<12){
$("#nextValue").prop("disabled", true);
}else{sta = sta + limit;
		fetchData();}
	});
// 	$('#PreeValue').click(function () {
// 		var rowCount = $('#table td').length;
// console.log(rowCount);
//
// if(rowCount==0){
// $("#PreeValue").prop("disabled", true);
// }else{sta = sta - limit;
// 		fetchData();}
// 	})

$(document).ready(function() {
  $('th').each(function(col) {
    $(this).hover(
    function() { $(this).addClass('focus'); },
    function() { $(this).removeClass('focus'); }
  );
    $(this).click(function() {
      if ($(this).is('.asc')) {
        $(this).removeClass('asc');
        $(this).addClass('desc selected');
        sortOrder = -1;
      }
      else {
        $(this).addClass('asc selected');
        $(this).removeClass('desc');
        sortOrder = 1;
      }
      $(this).siblings().removeClass('asc selected');
      $(this).siblings().removeClass('desc selected');
      var arrData = $('#table').find('tbody >tr:has(td)').get();
      console.log(arrData);
      arrData.sort(function(a, b) {
        var val1 = $(a).children('td').eq(col).text().toUpperCase();
        console.log(val1);
        var val2 = $(b).children('td').eq(col).text().toUpperCase();
        console.log(val2);
        if($.isNumeric(val1) && $.isNumeric(val2))
        return sortOrder == 1 ? val1-val2 : val2-val1;
        else
           return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0;
           console.log(sortOrder);
      });
      $.each(arrData, function(index, row) {
        $('tbody').append(row);
        console.log(index);
      });
    });
  });
});
var pages = Math.ceil(10 / 3);
       var pageref = function() {
           for (var i = 1; i <= pages; i++) {
               $("#page_navigation").append("<a href='#' id='"+i+"'>" + i + "</a><span>  </span>");
           }
       }
       pageref();
       var tab = function(start){

       }
       tab("1");
       $("a").click(function() {
       var pageno =  $(this).attr('id');
         sta = (pageno-1) * 3;
     		fetchData();
      });

   });
// });

// });

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>ajax assignment</title>
    <script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
    <script src="sortChildren.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="file.js"></script>
</head>
<body>
  <div>
  <table id="table">
     <thead>
     <tr>
         <th>Name</th>
         <th>Email</th>
         <th>Message</th>
         <th>Date</th>
     </tr>
      </thead>
      <tbody class="tbody">
         <ul></ul>
      </tbody>
 </table>
 <div id ="yoo">
 <div id='page_navigation'></div>
<span id="nextValue">next</span></div>
 </div>
 <!-- <button class="sort-table asc">sort ASC</button>
<button class="sort-table desc">sort DESC</button> -->
    <div class="container">
        <div class="main">
            <form id="form" action='' method='post'>
                <label>Name :</label>
                <input type='text' name='name' placeholder='user name' id='name' required>
                <br>
                <label>Email :</label>
                <input type='email' name='email' placeholder='email' id='email' required>
                <br>
                <label>Message :</label>
                <input type='text' name='message' placeholder='message' id='msg' required>
                <br>
                <label>Date :</label>
                <input type='date' name='date' placeholder='date' id='date' required>
                <button id='sub'>Submit</button>
            </form>
        </div>
        <br>
    </div>
</body>
</html>

＆＃13;

＆＃13;

＆＃13;