刷新表后对数据表进行排序和搜索 [英] Sorting and Searching DataTables after refreshing table

查看：19
本文介绍了刷新表后对数据表进行排序和搜索的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

背景:我有一个包含小部件的小型 jquery 应用程序.此应用程序中有 2 种类型的小部件，它们是计数器小部件和网格小部件.对于网格小部件，我正在使用 dataTables.

我的应用程序基本上连接到服务器并接收各种信息，例如计数器和网格小部件的小部件名称和值.因此，根据收到的信息，我为每个小部件动态创建页面.目前一切正常，但我遇到了一个小问题.

问题我现在的问题是我的网格小部件使用了 dataTables api.我从我的服务器接收到这种格式的网格信息.

**//示例输入/*<?xml version="1.0" encoding="UTF-8"?><行><头><column width="55" type="ro" align="left" sort="str">播放器</column><column width="55" type="ro" align="left" sort="str">State</column><column width="55" type="ro" align="left" sort="str">Points</column><row id="1"><cell>勒布朗·金·詹姆斯</cell><cell>最佳模式</cell><细胞>45</细胞></row></rows>*/**

然后我解析它并将其插入表格中.问题是我每 3 秒更新一次，因为网格的数据是实时更新的.因此，当我进行更新时，我的搜索过滤器和排序将被重置.

例如，如果我按最高分排序

玩家积分詹姆斯国王 45德里克罗斯 30更新发生，我的排序将得到休息玩家积分德里克罗斯 30詹姆斯国王 45

我的 HTML 代码

<头><meta name="generator" content="HTML Tidy for Windows(2006 年 2 月 14 日)，请参阅 www.w3.org"/><标题>NBA狂热者<meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="themes/tdMobile.min.css" type="text/css"/><link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" type="text/css"/><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" type="text/css"/><link rel="stylesheet" type="text/css" href="cssfinal/style.css"/><script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script><script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js" type="text/javascript"></script><script src="dhtmxSuite/dhtmlxWindows/codebase/dhtmlxcommon.js" type="text/javascript"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script><script src="jquery.ui.touch-punch.min.js" type="text/javascript"></script><!-- 用于获取数据的 COUTNER 小部件、表格、AJAX 请求的主要 JS 脚本包含代码--><script src="dynamic.js" type="text/javascript"></script><!-- 数据表脚本--><!-- 数据表 CSS --><link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/><;!-- 数据表 --><script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></脚本><身体><!-- 第 1 页 --><div data-role="page" data-theme="a" id="page1"><div data-role="content" data-theme="a"><div class="登录框" id="登录"><div id="登录提示"><div id="标题"><h3>篮球狂热者

<表单方法=获取"><div id="username" data-role="fieldcontain"><input type="text" name="username" placeholder="用户名"/>

<div id="password" data-role="fieldcontain"><input type="password" name="password" id="txtId" placeholder="密码"/>

<div id="loginbtn"><a data-role="button" id="log" data-theme="a" href="#page2" data-transition="slide">LOGIN</a>

</form><br/>

</div><!-- 第 2 页 --><div data-role="page" id="page2"><div data-role="header" data-position="fixed" data-theme="a"><a data-iconpos="notext" href="#panel" data-role="button" data-icon="bars"></a><h1 class="ui-title" role="heading">篮球狂热者<div class="ui-btn-right" data-type="horizo​​ntal"><a data-iconpos="notext" href="#page2" data-role="button" data-icon="home"></a><a data-iconpos="notext" href="#page1" data-role="button" data-icon="delete"></a>

<div data-role="content" id="page2content"><ul data-role="listview" data-inset="true"><li data-role="list-divider" data-theme="a">欢迎！<li>使用左侧的菜单进行导航<br/>并配置各种选项.

<div data-role="panel" id="panel" data-position="left" data-theme="a" data-display="push"><!-- <div>--><div id="导航"><h3>导航<小时/><label><input id="chkSort" type="checkbox" checked="true"/>允许排序</label><小时/>

<div id="items" data-role="button"><!-- 在此处插入解析的小部件名称--><a href="#page1" data-transition="fade" data-theme="a" data-role="button">退出</a></div><!-- </div>-->

我的 JS

var widgetNames = new Array();var widgetId = new Array();var pageId = ''$(document).on("pagecreate", function () {$("body > [data-role='panel']").panel().enhanceWithin();});$(document).on('pagecreate', '#page1', function () {$("#log").on('click', function () {$.ajax({url: "script.login",类型:获取"，数据: {'页面':'创建用户'，'访问':'用户'，'用户名': $("input[name='username']").val(),'密码':$("input[name='password']").val()},数据类型:文本"，成功:功能(html){widgetNames = new Array();widgetId = new Array();var res = html.match(/insertNewChild(.*);/g);//获取每个小部件名称和ID并分配给数组中的值for (var i = 0; i < res.length; i++) {//警报(res [i])；var temp = res[i].split(',');如果(临时长度> = 3){widgetNames[i] = (temp[2].replace('");', '')).replace('"', '');widgetId[i] = temp[1].replace("'", "").replace("'", "").replace(//g, '');}}var AllWidgets = ''var testwidget = new Array();//遍历返回的html并获取与每个小部件相关的数据...保存在临时数组中var tempWidgetContent = html.match(/wd+.isHidden(.*)() == false)[sS]*?catch(err){}/gm);for (var i = 0; i < tempWidgetContent.length; i++) {var widgetContent = tempWidgetContent[i].substring(tempWidgetContent[i].indexOf('{') + 1);testwidget[i] = widgetContent.replace("site +", "");//替换网格的代码...如果 (testwidget[i].indexOf('grid') > 0) {testwidget[i] = CreateGridUpdateFunction(testwidget[i], i);}}var widgetPart = new Array();//假设我们有 3 个数组中的小部件名称、ID 和加载数据//循环并创建必要的页面.for (var i = 0; i < widgetNames.length; i++) {如果 (testwidget[i].indexOf('hi') > -1) {//标题为网格小部件页面var pageHeaderPart = "<div data-role='page' id='" + widgetId[i] + "' data-pageindex='" + i + "' class='dynPageClass'><div data-role='header' id='header1' data-position='fixed' data-theme='a'><a href='#panel' data-icon='bars' data-iconpos='notext' class='ui-btn-left'></a><a href='#' data-icon='search' id='search' data-iconpos='notext' class='ui-btn-left'style='margin-left: 35px'></a><h1>Basketball Fanatico</h1><a href='#page1' data-icon='delete' data-iconpos='notext' 类='ui-btn-right'></a><a href='#page2' data-icon='home' data-iconpos='notext' class='ui-btn-right' style='margin-right: 35px;'></a></div><div data-role='content'>";} 别的 {//计数器小部件页面的标题var pageHeaderPart = "<div data-role='page' id='" + widgetId[i] + "' data-pageindex='" + i + "' class='dynPageClass'><div data-role='header'data-position='fixed' data-theme='a'><a data-iconpos='notext' href='#panel' data-role='button'data-icon='bars'></a><h1 class='ui-title'role='heading'>Basketball Fanatico</h1><div class='ui-btn-right' data-type='horizo​​ntal'>;<a data-iconpos='notext' href='#page2' data-role='button'data-icon='home'style=" margin-right:5px;"></a><a data-iconpos='notext' href='#page1' data-role='button'data-icon='delete'></a></div></div><div data-role='content'>";}//所有小部件页面的页脚var pageFooterPart = "</div><div data-role='footer' data-position='fixed'><span class='ui-title'><div id='navigator'></div></span></div></div>";如果 (testwidget[i].indexOf('hi') > -1) {//网格页面小部件标题var check = "<div data-role='tbcontent'><ul data-role='listview'data-insert='true'><li data-role='list-divider' data-theme='a'>"+ widgetNames[i] + "";}//计数器页面小部件标题var check = "<div data-role='content'><ul data-role='listview'data-insert='true'><li data-role='list-divider' data-theme='a'>"+ widgetNames[i] + "</div>";如果 (testwidget[i].indexOf('counterValue') > 0) {//计数器内容(计数器小部件的实际值)widgetPart[i] = '<DIV style=" text-align: center; background-color:#EDEDED; padding-bottom: auto; font-size: 55pt;" id=widgetContainer_' + widgetId[i] +'></DIV><SCRIPT>'+ 'function UpdateWidgetDiv' + widgetId[i] + '() {' + testwidget[i] + '$("#widgetContainer_' + widgetId[i] + '").html(counterValue);'+ '}' + '</SCRIPT>';}如果 (testwidget[i].indexOf('hi') > -1) {//网格内容(网格小部件的实际值)widgetPart[i] = '




        
        

            
相关文章

            
        

        

            



        

    
    

        

            
前端开发最新文章

            
        

        

            

                热门教程
            

            
        

        

            

                热门工具
            

            
        

        
    



    


    

        

            登录
            关闭
        

        

            

                扫码关注1秒登录
            

            

                
            

            

                
                
            

            

                发送“验证码”获取
                |
                15天全站免登陆