使用jQuery AJAX通过或者使用JSON或HTML文件Autorefreshing /更新表

答

用ajax很简单，
我建议你​​使用HTML数据类型这是你有一个表在你的容器，
有一个API文档在这里=> http://api.jquery.com/jQuery.ajax/
这里有一个小提琴，我为你=> http://jsfiddle.net/sijav/kHtuQ/19/ 或http://fiddle.jshell.net/sijav/kHtuQ/19/show/

我已经把AJAX code在一个名为updateClass（URL）功能，URL表示URL，以获取它会追加容器与HTML它那里得到=>

using ajax is very simple,
I recommend you to use HTML datatype for this as you have a table in your container,
there is an api documentation here => http://api.jquery.com/jQuery.ajax/
here's a fiddle I made for you => http://jsfiddle.net/sijav/kHtuQ/19/ or http://fiddle.jshell.net/sijav/kHtuQ/19/show/

I have put ajax code in a function named updateClass(url) which url stands for the url to get and it will append the container with the HTML it get =>

function updateClass(url){
    $.ajax({
        url: url,
        dataType: "HTML",
        error: function(msg){
            alert(msg.statusText);
            return msg;
        },
        success: function(html){
            $("#container").html(html);
        }
    });
}

我添加了一个refreshClass它刷新整个容器类，=>

I have added a refreshClass which refresh the whole container class, =>

function refreshClass(){
            updateClass("http://fiddle.jshell.net/sijav/mQB5E/5/show/"); //update the class
}

和改变了变化选择以下code =>

and changed on change selector to below code =>

var classUpdateI; //stands for our interval updating class
$(".class-selector").on("change",function(){
    if (classUpdateI!=null)clearInterval(classUpdateI); //If the selector changed clear the interval so the container won't be update on it's own
    if(this.value == "")
        return; // if the value is null don't do anything
    else if(this.value == "allclassnup"){
        refreshClass(); //if the value is allclassnup which is stands for All Non-Updating just refresh the whole class 
    }
    else if(this.value == "allclassup"){
        refreshClass(); //if the value is allclassup which is stands for All Updating refresh the whole class and set an interval for thirty second (look for 30*1000)
        classUpdateI = setInterval(refreshClass,30*1000);
    }
    else //else then it's a simple class value, just simply update the current class
        updateClass(this.value);
})

希望它帮助;）
修改：编辑，以便它可以得到大表（！不产生的话）和所有更新将在30秒的间隔更新
AnotherEDIT ：信不信我已经做了所有你的问题
！ 工作FIDDLE： http://jsfiddle.net/sijav/kHtuQ/39/ 或http://fiddle.jshell.net/sijav/kHtuQ/39/show/
1，这是因为它不仅是最后的HTML做到的，我们要再次让新！所以把整个 $（'TR'）。点击（）函数到另一个函数，并调用它在必要时。
- 你想这完全工作？这是一个有点复杂，但它可以用些许变化工作在codeS！那我要告诉你，好吧，这里是我们应该把当前类的类选择更改cookie中的algurithm然后我们就可以读到它时，我们刷新或重新载入页面，并把必要的选择类等等... 但在code这里的设计我做使它工作，
首先，我做了一个所谓的全局变量 FirstTimeInit = TRUE; 只是可以肯定的，如果我们在第一次页面加载与否，第二次我把循环，使突出的东西在页面加载到被调用函数 selectSelectedClass ，为什么呢？因为我们需要调用了很多次，第三次我加了一些if语句，以确保如果我们能够读取cookies，然后改变强调的东西和当前类也，这里是code：

Hope it helps ;)
EDIT: Edited so it can get big table (not generate it!) and all-updating will update in an interval of 30 sec
AnotherEDIT: Believe it or not I have done all of your question!
WORKING FIDDLE:http://jsfiddle.net/sijav/kHtuQ/39/ or http://fiddle.jshell.net/sijav/kHtuQ/39/show/
1 that is because it was only done for the last html, for the new we should make it again! so put the whole $('tr').click() function into another function and call it when necessary.
- do you want this to fully working? it's a little bit complicated but it can works with a bit of change in codes! that I'm gonna show you, Alright here's the algurithm we should put the current class on class selector change to cookie and then we can read it whenever we refresh or reload the page and put the necessary selected class and so on ...
but in code designing here I did to make it working,
first I made a global variable called FirstTimeInit = true; just to be sure if we're on the first time of page loading or not, second I put the for loop that make things highlighting on page load to a function called selectSelectedClass, why? because we need to call it many times, Third I added some if statement to be sure if we can read cookies then change highlighted things and current class also, here is the code:

if(readCookie("CurrentClass")) //if we can read coockie
    $(".class-selector").val(readCookie("CurrentClass")).change(); //change it's value to current cookie and trigger the change function
else{ // else
    selectSelectedClass(); //select those which was highlighted before
    trClick(); //make things clickable
    FirstTimeInit = false; //and turn of the first time init
}

第四加入了创建选择价值变动饼干=> 的createCookie（CurrentClass，$（类的选择。）VAL（），1）;
最后更改让阿贾克斯这一成功

Forth adding a create cookie on selector value changes = > createCookie("CurrentClass",$(".class-selector").val(),1);
and finally change the success on getting Ajax to this

        success: function(html){
            $("#container").html(html + '<a id="KEY"></a>'); //the html container changer with adding extra id , I'll explain it later it's for your second question
            if(FirstTimeInit){ //if it is First Time then
                selectSelectedClass(); //highlight which was highlighted after put the correct html
                FirstTimeInit = false; // turn of the first time init
            }
            else //else
                for (var i=0;i<($("table").children().length);i++){
                    if(readCookie(i))
                        eraseCookie(i); //erase every cookie that has been before because the table is now changed and we're going on another table so old cookie won't matter
                }
            trClick(); //make things selectable!
        }

此外，使其bugfree我已经改变了refreshClass转firstinit当选定类是全部或为null，因为那时我们拥有所有的类和需要这些饼干！所以这里的code：

Also to make it bugfree I have changed the refreshClass to turn firstinit when the selected class is all or it is null because then we have all classes and need those cookies! so here's the code:

function refreshClass(){
    if(readCookie("CurrentClass")=="allclassnup"||readCookie("CurrentClass")=="allclassup"||readCookie("CurrentClass")==null)
        FirstTimeInit = true;
    updateClass("http://fiddle.jshell.net/sijav/mQB5E/5/show/");
}

2 ＆LT;一个ID =TOP＆GT;＆LT; / A＆GT; 必须在容器之前，在＆LT;一个ID =KEY＆GT;＆所述; / a取代; 必须在容器的端部放置的html在容器上后产生的。 。所以 $（＃集装箱）HTML（HTML +'＆LT;一个ID =KEY＆GT;＆LT; / A＆GT;'）;

2 the <a id="TOP"></a> must be before the container, the <a id="KEY"></a> must be generated on the end of the container after putting html on the container. so $("#container").html(html + '<a id="KEY"></a>');

3下和previous按钮被设计用于非Ajax previous设计，它现在需要一个不同的解决方案！看到这些简单的C $ CS $例如：

3 Next and Previous button was designed for non-ajax previous design, It's now needing a different solution! see these simple codes for example

$("#PreviousClass").click(function(){//on prev click
    $(".class-selector").val($(".class-selector option:selected").prev().val()).change() //change the value to the prev on and trigger the change
});

$("#NextClass").click(function () {//on next click
    $(".class-selector").val($(".class-selector option:selected").next().val()).change() //change the value to the prev on and trigger the change
});

4是有可能，你应该改变你达到键和向下这些codeS，你是好去=>

4 Yes It is possible you should change your up to key and down to these codes and you're good to go =>

currentClass=0;
$("a.TOPJS").click(function () {
    if(currentClass>0){
        currentClass--
        scrollToAnchor('CLASS'+currentClass);
    }
});

$("a.KEYJS").click(function () {
    if($("a[id='CLASS" + currentClass + "']")[0]!=undefined){
        currentClass++
        scrollToAnchor('CLASS'+currentClass);
    }
    else
        scrollToAnchor('CLASSMAX');
});

二年即可回收全部运

Godd Luck

另一个请求编辑：（！希望这将是最后一次）
工作小提琴： http://jsfiddle.net/sijav/kHtuQ/42/ 或http://fiddle.jshell.net/sijav/kHtuQ/42/show/
好吧，你不喜欢上刷新的变化类，其中之一是它我已删除了，和更好的我已经添加了一些codeS有类饼干，饼干都没有树有某种的条件下，类是从类选择的最后一个字符读取，所以一定要上课人数为象的最后一个字符 - > 类数*** 5 *** 5号将被读为类选择！
修改：优化类下一个和$ P $光伏看到 http://jsfiddle.net/sijav/kHtuQ / 46 /
修改：根据意见要求，
这就是我想告诉你，有时候演示显示了jsfiddle.net，有时它显示了fiddle.jshell.net，这些都是不同的域，你不能从不同领域获取的HTML。
1）您只可以放间隔功能或只是创建另一个函数，并调用它像这样适当的方式=>

Another Request (hope this will be the last!)
Working Fiddle: http://jsfiddle.net/sijav/kHtuQ/42/ or http://fiddle.jshell.net/sijav/kHtuQ/42/show/
alright as you didn't like the change class on refresh to one which was in it I have removed that, and a better I have added some codes to have classes in cookies, as cookies are not tree there is some kind of conditions, the class is being read from the last character of class selector so be sure to have class number at the last character like -> Class number ***5*** the number 5 will be read for class selector!
EDIT: optimize class next and prev see http://jsfiddle.net/sijav/kHtuQ/46/
EDIT: As per comment requested,
That is what I'm trying to tell you, sometimes the demo shows on jsfiddle.net, sometimes it shows on fiddle.jshell.net, these are different domains and you cannot get html from different domains.
1) You may only put function in Interval or just create another function and call it proper way like this =>

classUpdateI = setInterval(function(){updateClass(this.value,parseInt(a.charAt(a.length-1),10));},30*1000);

2）者失踪？我找不到你的第二个问题！
3）好了，... trclick需要改变......为=>

2) Missings?! I can't find your second question!
3) Well, ... trclick needs to change ... to =>

function trClick(tIndex){ //tIndex would be classnumber from now on
    if (tIndex == -1){ //if it is all updating or all non updating
        $("tr").click(function(){ //do the previous do
            $(this).toggleClass('selected').siblings().removeClass('selected');
            if(readCookie($(this).parent().index("tbody"))){
                if(readCookie($(this).parent().index("tbody"))==$(this).index())
                    eraseCookie($(this).parent().index("tbody"));
                else{
                    eraseCookie($(this).parent().index("tbody"));
                    createCookie($(this).parent().index("tbody"),$(this).index(),1);
                }
            }
            else
                createCookie($(this).parent().index("tbody"),$(this).index(),1);
        });
    }
    else{ //else
        $("tr").click(function(){ //on click
            $(this).toggleClass('selected').siblings().removeClass('selected');//do the toggle like before
            if(readCookie(tIndex)){ //if you can read the CLASS cookie, not the current index of table because our table has only one row
                if(readCookie(tIndex)==$(this).index()) //as before if we selecting it again
                    eraseCookie(tIndex); //just erase the cookie
                else{ //else
                    eraseCookie(tIndex); //select the new one
                    createCookie(tIndex,$(this).index(),1);
                }
            }
            else
                createCookie(tIndex,$(this).index(),1); //else if we can't read it, just make it!
        });
    }
}

，当我们把它称为Ajax的成功，我们应该classNumber => trClick（classNumber）调用它;
最后工作提琴：的 http://jsfiddle.net/sijav/kHtuQ / 53 / 或http://fiddle.jshell.net/sijav/kHtuQ/53/show/

and when we call it on Ajax success we should call it with classNumber => trClick(classNumber);
Last working fiddle: http://jsfiddle.net/sijav/kHtuQ/53/ or http://fiddle.jshell.net/sijav/kHtuQ/53/show/

好运的

Good Luck