zoukankan      html  css  js  c++  java
  • 一.jquery.datatables.js表格显示

    2014810日星期日

    使用jquery.datatables.js取后台数据。

    1.html代码

     

    <table class="dataTables-example">
    <thead>
    <tr>
    <th>id</th>
    <th>项目</th>
    <th>内容</th>
    <th>所属公司</th>
    <th>开始日期</th>
    <th>结束日期</th>
    <th>成员</th>
    <th>需求分析</th>
    <th>方案</th>
    <th>状态</th>
    <th>操作人</th>
    <th>备注</th>
    </tr>
    </thead>
    </table>

     

    2.js代码

     var tables=$('.dataTables-example').DataTable({
    
                "processing": true,
    
                // "serverSide": true,
    
                "ajax":{
    
                     "url":"initable",
    
                },
    
                "columns":[
    
                            { "data": "id" },
    
                            { "data": "project" },
    
                            { "data": "content" },
    
                            { "data": "company" },
    
                            { "data": "stime" },
    
                            { "data": "etime" },
    
                            { "data": "staff" },
    
                            { "data": "requirement" },
    
                            { "data": "scheme" },
    
                            { "data": "status" },
    
                            { "data": "operator" },
    
                            { "data": "note" },
    
                        ]
    
     
    
            });

    serverSide属性加入时会使search没有办法用。

    具体参数可以查询官网

     

    3.$('#add-form').ajaxForm(function(data){

                  if (data=='success') {

                        alert('添加成功!');

                        tables.ajax.reload();

                   $("#modal-form").modal("hide");

                  else{

                       alert('添加失败!');

                  };

    });

    使用form的异步上传(jquery.form.js),当取到后台返回值success时。刷新表格。

     

    4.后台php代码

     

    function initable(){

         $db = M('yanfa_project')->select();

         $data=[

              "draw"=>1,

              "recordsTotal"=>10,

              "recordsFiltered"=> 2,

              "data"=>$db,

          ];

         echo json_encode($data);

    }

     

     

     

  • 相关阅读:
    KUDU 介绍
    Redis是什么?什么作用?优点和缺点
    数据库的种类有哪些?
    oracle 存储过程之游标(loop)使用
    JsHelper.cs
    MsSqlHelper.cs
    PLSQL操作Oracle创建用户和表(含创建用户名和密码)
    ASP.NET开发--三层架构
    oracle数据库之数据插入、修改和删除
    IDEA 搭建SSM框架详细教程以及token本地运行环境常遇到的问题
  • 原文地址:https://www.cnblogs.com/ada-zheng/p/3907501.html
Copyright © 2011-2022 走看看