Jquery插件之DataTables初探

最新推荐文章于 2024-04-19 09:50:14 发布

hireboy

最新推荐文章于 2024-04-19 09:50:14 发布

阅读量2.5k

点赞数 1

分类专栏： jquery+ajax

jquery+ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天闲来无事，就研究了一下Jquery的DataTables插件。感觉效果不错，支持排序和内容过滤(查询)，在这里向大家推荐一下^_^

不得不说之前犯了一个错误，这个插件应该叫做DataTable，而我把它当成了tablesort，实在不好意思。。。。。

可以直接到官网上去下载下来，单击http://www.datatables.net/到官网上看看，什么API、demo之类的一应俱全，不过是英文版的，你可以用编辑器打开jquery.dataTables.js找到this.oLanguage =。。。属性自己汉化一下就好了。下载下来的是一个压缩包，里面有tableSort插件的示例，如果要用的话，可以直接找到media文件夹下面的js文件夹，里面jquery.dataTables.js和它的精简版以及jquery.js，直接吧media文件夹下的css、imges、js都拷贝到你的项目中，然后在网页中引用后直接调用，
$(function(){

           $("#gridtable").dataTable({
                "aaSorting": [[4, "desc"]],
                "sPaginationType": "full_numbers"
            });
});
就好了。

说明：1.#gridtable就是你要排序的table的id
           2.table必须是标准的HTML table（含有thead和tbody），否则不会有效果的
           3.tableSort能够对列进行排序、自动分页、查询，当然应该还有其他我还没有用过的功能
           4.如果是从官网上下载下来的话，“查询”、“上一页”、“下一页”之类的是英文表示的，你可以自己打开jquery.dataTables.js改成中文就可以了，而且还有很多属性可以设置，比如上面的"sPaginationType"就是用来控制翻页按钮的。

下面是自己在asp.net中应用的一个Demo：

aspx页面的代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="Web_JZ._Default" %>

<!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 runat="server">
    <title>账目开支详细</title>
    <style type="text/css">
       #divContent
       {
       margin:0 auto;
       width:500px;
       }
       #DivMsgBox
       {
       width:150px;
       height:100px;
       border:1px solid #ccc;
       display:none;
       z-index:10;
       position:absolute;
       background-color:#eee;
       border-bottom:2px solid #000;
       border-right:2px solid #000;
        }

        .table_style1
        {
        margin:0 auto;
        width:500px;
        border-color:#5c809e;
        border-collapse:collapse;
        }
        .table_style1 th{
        background-color:#d7e3ee;
        }

        .table_style1 tr.altrow{
        background-color:#e5f2fd;
        }
        .table_style1 tr.table_hover{
        background-color: #5CADAD;

}

    </style>
    <link rel="Stylesheet" type="text/css" href="css/demo_table.css" />
    <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="js/jquery.dataTables.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {
            check();
            //点击查看详细
            $("a").click(function() {
                var left = $(this).offset().left + 50;
                var top = $(this).offset().top;
                var url = $(this).attr("href");
                $.get(url, function(data) {
                    $("#DivMsgBox").empty();
                    $("#DivMsgBox").css("left", left);
                    $("#DivMsgBox").css("top", top);
                    $("#DivMsgBox").show();
                    $("#DivMsgBox").append(data);
                });
                return false;
            });
            pagging();
        });
        function hideMsgBox() {
            $("#DivMsgBox").hide();
        }
       //超支出检查
        function check() {
            $(".table_style1 tr").each(function() {
                var yu_e = $(this).find("td").eq(3).text();
                if (yu_e < 0) {
                    $(this).css("background-color","red");
                }
            });
        }
        //调用tableSort，只需要下面这个方法（要加载完成后执行）
        function pagging() {
            $("#gridtable").dataTable({
                "aaSorting": [[4, "desc"]],
                "sPaginationType": "full_numbers"
            });
        }

    </script>
</head>
<body οnclick="hideMsgBox()">
    <form id="form1" runat="server">
    <label style="font-size:30px;text-align:center;display:block;margin:0 auto;">日常开支记录</label>
    <div id="divContent">
        <asp:Repeater ID="Repeater1" runat="server">
        <HeaderTemplate>
        <table class="table_style1" id="gridtable" >
        <thead>
        <tr>
            <th>时间</th>
            <th>收入</th>
            <th>支出</th>
            <th>余额</th>
            <th>账目详细</th>
        </tr>
        </thead><tbody>
        </HeaderTemplate>
        <ItemTemplate>
        <tr>
            <td><%#Convert.ToDateTime(Eval("time")).ToString("yyyy-MM-dd") %></td>
            <td><%#Eval("shou_ru") %></td>
            <td><%#Eval("zhi_chu") %></td>
            <td><%#Eval("yu_e") %></td>
            <td><a href="Query.aspx?ID=<%#Eval("ID") %>" >账目详细</a></td>
        </tr>
        </ItemTemplate>
        <FooterTemplate> </tbody></table></FooterTemplate>
        </asp:Repeater>
    </div>

    </form>
    <div id="DivMsgBox">

    </div>
</body>
</html>

aspx.cs页面的代码就不用贴出来了，也就是一个数据的绑定，还是整张运行的效果图，自我陶醉下，O(∩_∩)O~

hireboy

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Jquery插件之DataTables初探

今天闲来无事，就研究了一下Jquery的DataTables插件。感觉效果不错，支持排序和内容过滤(查询)，在这里向大家推荐一下^_^不得不说之前犯了一个错误，这个插件应该叫做DataTable，而我把它当成了tablesort，实在不好意思。。。。。可以直接到官网上去下载下来，单击http://www.datatables.net/到官网上看看，什么API、demo之类的
复制链接

扫一扫

专栏目录