【4858美高梅】jQuery表格插件datatables用法详解,对话框dialog的应用教程

By admin in 4858美高梅 on 2019年7月14日

【4858美高梅】jQuery表格插件datatables用法详解,对话框dialog的应用教程。一、Datatables简介 DataTables是四个jQuery的报表插件。那是一个惊人灵活的工具,依赖的底蕴日益增进,那将大增先进的相互调控,帮助其余HTML表格。主要特征:

jQuery表格插件datatables用法详解,jquerydatatables

一、Datatables简介 DataTables是五个jQuery的表格插件。那是三个惊人灵活的工具,依赖的根底日益坚实,那将净增先进的相互调整,帮忙别的HTML表格。主要特色:

  • 机动分页管理
  • 即时表格数据过滤
  • 数码排序以及数据类型自动检查实验
  • 自动管理列宽度
  • 可通过CSS定制样式
  • 帮助遮盖列
  • 易用
  • 可扩充性和灵活性
  • 国际化
  • 动态创造表格
  • 免费的

二、怎样利用 在做后台的时候并不曾水墨画和前端技术员来协作你做页面,为了体现数据并有自然的美感,大家得以应用jQuery的DataTables插件来增加帮衬大家成功任务
1、DataTables的暗中同意配置

 $(document).ready(function() { 
$('#example').dataTable(); 
} ); 

2、DataTables的一些基础属性配置

 "bPaginate": true, //翻页功能 
"bLengthChange": true, //改变每页显示数据数量 
"bFilter": true, //过滤功能 
"bSort": false, //排序功能 
"bInfo": true,//页脚信息 
"bAutoWidth": true//自动宽度 

3、数据排序

$(document).ready(function() { 
$('#example').dataTable( { 
"aaSorting": [ 
[ 4, "desc" ] 
] 
} ); 
} ); 

从第0列始发,以第4列倒序排列
 4、遮蔽某个列**
**

$(document).ready(function() { 
$('#example').dataTable( { 
"aoColumnDefs": [ 
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] }, 
{ "bVisible": false, "aTargets": [ 3 ] } 
] } ); 
} ); 

5、国际化**
**

$(document).ready(function() { 
$('#example').dataTable( { 
"oLanguage": { 
"sLengthMenu": "每页显示 _MENU_ 条记录", 
"sZeroRecords": "抱歉, 没有找到", 
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据", 
"sInfoEmpty": "没有数据", 
"sInfoFiltered": "(从 _MAX_ 条数据中检索)", 
"oPaginate": { 
"sFirst": "首页", 
"sPrevious": "前一页", 
"sNext": "后一页", 
"sLast": "尾页" 
}, 
"sZeroRecords": "没有检索到数据", 
"sProcessing": "<img src='./loading.gif' />" 
} 
} ); 
} ); 

6、排序功用:**
**

$(document).ready(function() { 
$('#example').dataTable( { 
"aoColumns": [ 
null, 
{ "asSorting": [ "asc" ] }, 
{ "asSorting": [ "desc", "asc", "asc" ] }, 
{ "asSorting": [ ] }, 
{ "asSorting": [ ] } 
] 
} ); 
} ); 

7、数据获得援救4种:如下**
**

  • •DOM   文书档案数据 
  • •Javascript array  js数组 
  • •Ajax source     Ajax诉求数据 
  • •Server side processing 
    服务器端数据 

三、实例疏解

1、须求:如下图所示,对datatables的内容举办加多,编辑,删除的操作。

2、解析:增添意义—单击add按键,弹出对话框,增加新的剧情。
           
编辑功能—单击datatables能够选中一行,此行改动颜色,便是已经入选,单击edit开关,弹出dialog,此dialog中的内容是大家选中央银行的内容。若无选中央银行,点击edit开关,则不会弹出dialog。当双击datatables中的某一行时,也弹出dialog,何况双击的行更换颜色,dialog中的内容是我们双击行的内容。
           
删除功效—单击datatables选中一行,单击delete按键,弹出警告框,提示要不要刨除所选内容。当未有入选任何内容时,单击delete开关,不会弹出警示框,也不会删除内容。
3、 编码:
Attributes//名称

 <table id="gridtable" class="gridtable">//声明jquery datatables 
   <thead> 
     <tr> 
       <th>Name 
       </th> 
       <th>Value 
       </th> 
       <th>DisplayOrder 
      </th> 
    </tr> 
  </thead> 
  <tbody> 
    .....//datatables内容,此处省略 
  </tbody> 
</table> 
<input type="button" id="add" value="Add" />//添加按钮 
<input type="button" id="edit" value="Edit" />//编辑按钮 
<input type="button" id="delete" value="Delete" />//删除按钮 


<div id="e_Attributes">//声明dialog,异步更新 
  @using (Ajax.BeginForm("Update", "Product", new AjaxOptions 
{ 
  UpdateTargetId = "d_Attributes", 
  OnSuccess = "dialogClose", 
  HttpMethod = "Post", 
})) 
  { 
    <table> 
      <tbody> 
        <tr>              
          <td>Name</td> 
          <td> 
           <input id="name" name="Name" type="text" style="width:250px" class="required"/>*</td> 
        </tr> 
        <tr> 
          <td>Value</td> 
          <td> 
            <input id="value" name="Value" type="text" style="width:250px" class="required"/>*</td> 
        </tr> 
        <tr>   
         <td>DisplayOrder</td> 
          <td> 
            <input id="displayOrder" name="DisplayOrder" type="text" style="width:128px" class="required"/>*</td> 
        </tr> 
        <tr> 
          <td> 
            <input id="submit" type="submit" name="submit" value="Submit" /> 
            <input id="hiddenValue" type="hidden" name="hiddenValue" /> 
          </td> 
        </tr> 
      </tbody> 
    </table> 
  } 
</div> 

地点代码表达:这段代码首要分了多个部分,第一部分是jquery
datatables的扬言,<table id=”gridtable”
class=”gridtable”>;第二有个别是dialog的评释,以及操作所急需的action,此部分的操作选用ajax无刷新页面本事。所需js的代码:

<script type="text/javascript"> 
   function dialogClose() { 
     $("#e_Attributes").dialog("close"); 
   } 

   $("#e_Attributes").dialog({ 
     modal: true, 
     autoOpen: false, 
     show: { 
       effect: "blind", 
      duration: 1000 
     }, 
     hide: { 
       effect: "explode", 
       duration: 1000 
    }, 
    width: 400 
   }); 

   var editor; 

   $(function () { 
    //声明datatable 
     $("#gridtable").dataTable().fnDestroy(); 
     editor = $('#gridtable').dataTable({ 
      "bInfo":false, 
      "bServerSide": false, 
      'bPaginate': false,           //是否分页。 
       "bProcessing": false,          //当datatable获取数据时候是否显示正在处理提示信息。 
       'bFilter': false,            //是否使用内置的过滤功能。 
       'bLengthChange': false,         //是否允许用户自定义每页显示条数。 
       'sPaginationType': 'full_numbers',   //分页样式 
     }); 
    //单击,赋值,改样式 
    $("#gridtable tbody tr").click(function (e) { 
      if ($(this).hasClass('row_selected')) { 
        $(this).removeClass('row_selected'); 
        putNullValue() 
      } 
      else { 
        editor.$('tr.row_selected').removeClass('row_selected'); 
        $(this).addClass('row_selected'); 
        var aData = editor.fnGetData(this); 
        if (null != aData) { 
          putValue(aData); 
        } 
      } 
    }); 
    //双击 
    $("#gridtable tbody tr").dblclick(function () { 
      if ($(this).hasClass('row_selected')) { 
        //$(this).removeClass('row_selected'); 
      } 
      else { 
        editor.$('tr.row_selected').removeClass('row_selected'); 
        $(this).addClass('row_selected'); 
      } 

      var aData = editor.fnGetData(this); 
      if (null != aData) { 
        putValue(aData); 
      } 

      $("#hiddenValue").val("edit"); 
      $("#e_Attributes").dialog("open"); 

    }); 
    //添加 
    $("#add").click(function () { 
      editor.$('tr.row_selected').removeClass('row_selected'); 
      putNullValue(); 

      $("#hiddenValue").val("add"); 
      $("#e_Attributes").dialog("open"); 
    }); 
    //编辑 
    $("#edit").click(function () { 
       var productAttributeID = $("#productAttributeID").val(); 
      if (productAttributeID != "" && productAttributeID != null) { 
        $("#hiddenValue").val("edit"); 
        $("#e_Attributes").dialog("open"); 
      } 

    }); 
    //删除 
    $("#delete").click(function () { 
      var productAttributeID = $("#productAttributeID").val(); 
      var productID = $("#productID").val(); 
      if (productAttributeID != null && productAttributeID != "") { 
        if (confirm("Delete?")) { 
          $.ajax({ 
            type: "GET", 
            url: "@Url.Action("DeleteAttribute", "Product")", 
            data: { ProductID: productID, ProductAttributeID: productAttributeID },//参数名要和Action 中的参数名相同 
            dataType: "html", 
            cache: false, 
            success: function (result) { 
              $("#d_Attributes").html(result); 
              $("#productAttributeID").val(null); 
            } 
          }); 
        } 
      } 
    }); 

    //赋空值,并去除input-validation-error样式(此样式不管有无,均可去除,所以不用判断了) 
    function putNullValue() { 
      。。。。。。//此处省略 
    } 
    //赋值 
    function putValue(aData) { 
     。。。。。。//此处省略 
    } 
  }); 

  $.ajaxSetup({ cache: false }); 
</script>

上边代码表明:这段代码分别为dialog
的宣示,datatables的宣示以add,edit,delete的操作。
丰裕效应成效图

 4858美高梅 1

编写制定功用意义图:

               4858美高梅 2

删除效果图:

 4858美高梅 3

到此,功用已经整整兑现,所需的代码也早已贴出。
4、分页实现

引入CSS文件和JS文件

<style type="text/css" title="currentStyle"> 
    @import "DataTables-1.8.1/media/css/demo_page.css"; 
    @import "DataTables-1.8.1/media/css/demo_table.css"; 
    @import "DataTables-1.8.1/media/css/demo_table_jui.css"; 
</style> 
<script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.js"></script> 
<script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.dataTables.js"></script> 

 -------------------------------------------------------------------------- 

-----------最简单的方式: 
 $(document).ready(function() { 
 $("#example").dataTable(); 
}); 

----------也可以自己定义各属性: 
<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
      $("#example").dataTable({ 
//        "bPaginate": true, //开关,是否显示分页器 
//        "bInfo": true, //开关,是否显示表格的一些信息 
//        "bFilter": true, //开关,是否启用客户端过滤器 
//        "sDom": "<>lfrtip<>", 
//        "bAutoWith": false, 
//        "bDeferRender": false, 
//        "bJQueryUI": false, //开关,是否启用JQueryUI风格 
//        "bLengthChange": true, //开关,是否显示每页大小的下拉框 
//        "bProcessing": true, 
//        "bScrollInfinite": false, 
//        "sScrollY": "800px", //是否开启垂直滚动,以及指定滚动区域大小,可设值:'disabled','2000px' 
//        "bSort": true, //开关,是否启用各列具有按列排序的功能 
//        "bSortClasses": true, 
//        "bStateSave": false, //开关,是否打开客户端状态记录功能。这个数据是记录在cookies中的,打开了这个记录后,即使刷新一次页面,或重新打开浏览器,之前的状态都是保存下来的- ------当值为true时aoColumnDefs不能隐藏列 
//        "sScrollX": "50%", //是否开启水平滚动,以及指定滚动区域大小,可设值:'disabled','2000%' 
//        "aaSorting": [[0, "asc"]], 
//        "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}]//隐藏列 
//        "sDom": '<"H"if>t<"F"if>', 
        "bAutoWidth": false, //自适应宽度 
        "aaSorting": [[1, "asc"]], 
        "sPaginationType": "full_numbers", 
        "oLanguage": { 
          "sProcessing": "正在加载中......", 
          "sLengthMenu": "每页显示 _MENU_ 条记录", 
          "sZeroRecords": "对不起,查询不到相关数据!", 
          "sEmptyTable": "表中无数据存在!", 
          "sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录", 
          "sInfoFiltered": "数据表中共为 _MAX_ 条记录", 
          "sSearch": "搜索", 
          "oPaginate": { 
            "sFirst": "首页", 
            "sPrevious": "上一页", 
            "sNext": "下一页", 
            "sLast": "末页" 
          } 
        } //多语言配置 

      }); 
    }); 
  </script> 

对此 dataTables 来讲,表格必须通过 thead 和 tbody 进行求证,如下所示,

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
    <thead> 
      <tr> 
        <th> 
          Rendering engine 
        </th> 
        <th> 
          Browser 
        </th> 
        <th> 
          Platform(s) 
        </th> 
        <th> 
          Engine version 
        </th> 
        <th> 
          CSS grade 
        </th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr class="odd gradeX"> 
        <td> 
          Trident 
        </td> 
        <td> 
          Internet Explorer 4.0 
        </td> 
        <td> 
          Win 95+ 
        </td> 
        <td class="center"> 
          4 
        </td> 
        <td class="center"> 
          X 
        </td> 
      </tr>

 若无 thead 将会报错。

  • bPaginate: 是或不是分页,默以为true,分页
  • iDisplayLength :
    每页的行数,每页私下认可数量:10
  • sPaginationType:
    分页样式,帮助三种内置情势,two_button 和 full_numbers, 暗中同意使用
    two_button。
  • bLengthChange :
    是或不是允许用户通过叁个下拉列表来摘取分页后每页的行数。行数为
    10,25,50,100。这么些装置需求 bPaginate 援助。默以为 true。
  • bFilter: 启用或取缔数据过滤,默以为true。 注意,如若使用过滤效果,然而希望关闭默许的过滤输入框,应运用
    sDom
  • bInfo:
    允许或然禁止表新闻的来得,默认为 true,呈现消息。

可是简练的应用办法,正是零安插的秘技。

/*
 * Example init
 */
$(document).ready(function(){
  $('#example').dataTable();
});

如上正是有关jQuery表格插件datatables用法的详尽介绍,希望对大家的求学抱有帮忙。

率先介绍下那多个插件功用 

1、DataTables的私下认可配置

  • 机动分页管理
  • 即时表格数据过滤
  • 数量排序以及数据类型自动物检疫查测验
  • 自动管理列宽度
  • 可通过CSS定制样式
  • 支撑隐敝列
  • 易用
  • 可扩大性和灵活性
  • 国际化
  • 动态创制表格
  • 免费的

你或者感兴趣的小说:

  • JQuery插件iScroll完成下拉刷新,滚动翻页特效
  • 一个轻松易行的jQuery插件ajaxfileupload.js完结ajax上传文件例子
  • 引入十二个二零一六年一流的jQuery录制插件
  • 推荐8款jQuery轻量级树形Tree插件
  • web前端设计员们常用的jQuery特效插件汇总
  • JQuery右键菜单插件ContextMenu使用指南
  • jquery图片播放浏览插件prettyPhoto使用详解
  • 分享2个jQuery插件–jquery.fileupload与artdialog
  • 限定上传文件大小和格式的jQuery插件实例
  • jQuery插件slick达成响应式移动端幻灯片图片切换特效

一、Datatables简介DataTables是三个jQuery的报表插件。那是二个中度灵活的工具,依附的根基稳步…

1.DataTables是三个jQuery的报表插件。

$(document).ready(function() {
$(‘#example').dataTable();
} );

二、怎么样使用 在做后台的时候并不曾油画和前端程序猿来协作你做页面,为了显示数据并有自然的美感,大家得以采纳jQuery的DataTables插件来救助大家成功职务
1、DataTables的暗许配置

官网及其下载地址:http:/www.datatables.net

示例:

 $(document).ready(function() { 
$('#example').dataTable(); 
} ); 

其利害攸关特征如下:

2、DataTables的有的基础属性配置

2、DataTables的片段基础属性配置

1.自动分页管理

“bPaginate”: true, //翻页功效
“bLengthChange”: true, //更换每页显示数据数量
“bFilter”: true, //过滤功效
“bSort”: false, //排序作用
“bInfo”: true,//页脚消息
“bAutoWidth”: true//自动宽度

 "bPaginate": true, //翻页功能 
"bLengthChange": true, //改变每页显示数据数量 
"bFilter": true, //过滤功能 
"bSort": false, //排序功能 
"bInfo": true,//页脚信息 
"bAutoWidth": true//自动宽度 

2.即时表格数据过滤

4858美高梅 4

3、数据排序

3.数量排序以及数据类型自动检验

示例:

$(document).ready(function() { 
$('#example').dataTable( { 
"aaSorting": [ 
[ 4, "desc" ] 
] 
} ); 
} ); 

4.电动管理列宽度

3、数据排序

从第0列始发,以第4列倒序排列
 4、遮盖有个别列**
**

5.可透过CSS定制样式

$(document).ready(function() {
$(‘#example').dataTable( {
“aaSorting”: [
[ 4, "desc" ]
]
} );
} );
$(document).ready(function() { 
$('#example').dataTable( { 
"aoColumnDefs": [ 
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] }, 
{ "bVisible": false, "aTargets": [ 3 ] } 
] } ); 
} ); 

6.支撑遮盖列

从第0列始发,以第4列倒序排列

5、国际化**
**

7.易用

示例:

$(document).ready(function() { 
$('#example').dataTable( { 
"oLanguage": { 
"sLengthMenu": "每页显示 _MENU_ 条记录", 
"sZeroRecords": "抱歉, 没有找到", 
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据", 
"sInfoEmpty": "没有数据", 
"sInfoFiltered": "(从 _MAX_ 条数据中检索)", 
"oPaginate": { 
"sFirst": "首页", 
"sPrevious": "前一页", 
"sNext": "后一页", 
"sLast": "尾页" 
}, 
"sZeroRecords": "没有检索到数据", 
"sProcessing": "<img src='./loading.gif' />" 
} 
} ); 
} ); 

8.可扩大性和灵活性

4、多列排序

6、排序成效:**
**

9.国际化

示例:

$(document).ready(function() { 
$('#example').dataTable( { 
"aoColumns": [ 
null, 
{ "asSorting": [ "asc" ] }, 
{ "asSorting": [ "desc", "asc", "asc" ] }, 
{ "asSorting": [ ] }, 
{ "asSorting": [ ] } 
] 
} ); 
} ); 

10.动态成立表格

5、遮盖某个列

7、数据获得扶助4种:如下**
**

11.免费的

$(document).ready(function() {
$(‘#example').dataTable( {
“aoColumnDefs”: [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
{ “bVisible”: false, “aTargets”: [ 3 ] }
] } );
} );
  • •DOM   文书档案数据 
  • •Javascript array  js数组 
  • •Ajax source     Ajax诉求数据 
  • •Server side processing 
    服务器端数据 

2.对话框(dialog),**是jQuery UI
极度首要的一个意义**。它根本的代表了JavaScript的alert()、prompt()等办法,也幸免了新窗口或页面包车型地铁一塌糊涂冗余。

示例:

三、实例批注

本身这里直接讲下自家索要贯彻怎么着的功效,大家就领会了

6、改造页面上元节素的岗位

1、要求:如下图所示,对datatables的从头到尾的经过展开加多,编辑,删除的操作。

4858美高梅 5

$(document).ready(function() {
$(‘#example').dataTable( {
“sDom”: ‘<”top”fli>rt<”bottom”p><”clear”>'
} );
} );
//l- 每页显示数量
//f – 过滤输入
//t – 表单Table
//i – 信息
//p – 翻页
//r – pRocessing
//< and > – div elements
//<”class” and > – div with a class
//Examples: <”wrapper”flipt>, <lf<t>ip>

2、深入分析:增加效果—单击add按键,弹出对话框,加多新的内容。
           
编辑作用—单击datatables能够选中一行,此行改变颜色,正是已经入选,单击edit按键,弹出dialog,此dialog中的内容是我们选中央银行的原委。若无选中央银行,点击edit按键,则不会弹出dialog。当双击datatables中的某一行时,也弹出dialog,而且双击的行更改颜色,dialog中的内容是我们双击行的从头到尾的经过。
           
删除作用—单击datatables选中一行,单击delete开关,弹出警告框,提醒要不要去除所选内容。当未有入选任何内容时,单击delete按键,不会弹出警示框,也不会删除内容。
3、 编码:
Attributes//名称

对,正是三个极度轻松的删除成效,然后弹出对话框,然后点击鲜明,实施删除。

示例:

 <table id="gridtable" class="gridtable">//声明jquery datatables 
   <thead> 
     <tr> 
       <th>Name 
       </th> 
       <th>Value 
       </th> 
       <th>DisplayOrder 
      </th> 
    </tr> 
  </thead> 
  <tbody> 
    .....//datatables内容,此处省略 
  </tbody> 
</table> 
<input type="button" id="add" value="Add" />//添加按钮 
<input type="button" id="edit" value="Edit" />//编辑按钮 
<input type="button" id="delete" value="Delete" />//删除按钮 


<div id="e_Attributes">//声明dialog,异步更新 
  @using (Ajax.BeginForm("Update", "Product", new AjaxOptions 
{ 
  UpdateTargetId = "d_Attributes", 
  OnSuccess = "dialogClose", 
  HttpMethod = "Post", 
})) 
  { 
    <table> 
      <tbody> 
        <tr>              
          <td>Name</td> 
          <td> 
           <input id="name" name="Name" type="text" style="width:250px" class="required"/>*</td> 
        </tr> 
        <tr> 
          <td>Value</td> 
          <td> 
            <input id="value" name="Value" type="text" style="width:250px" class="required"/>*</td> 
        </tr> 
        <tr>   
         <td>DisplayOrder</td> 
          <td> 
            <input id="displayOrder" name="DisplayOrder" type="text" style="width:128px" class="required"/>*</td> 
        </tr> 
        <tr> 
          <td> 
            <input id="submit" type="submit" name="submit" value="Submit" /> 
            <input id="hiddenValue" type="hidden" name="hiddenValue" /> 
          </td> 
        </tr> 
      </tbody> 
    </table> 
  } 
</div> 

率先来看下dataTables里面包车型客车写法

7、状态保存,使用了翻页恐怕改造了每页展现数据数量,会保存在cookie中,下回访问时会呈现上一遍关闭页面时的内容。

上边代码表达:这段代码首要分了多个部分,第一有的是jquery
datatables的扬言,<table id=”gridtable”
class=”gridtable”>;第二片段是dialog的注明,以及操作所需求的action,此部分的操作选用ajax无刷新页面技能。所需js的代码:

$('#table').dataTable({
"sDom": "t" +
"<'soc-pagenagtion' ip>",
oLanguage: {
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
},
"autoWidth": false,
"processing": true,
"serverSide": true,
"searching": false,
ordering: false,
"info": true,
ajax: function (param, callback, settings) {
var service = $("#service").val();
var params = {
//参数集合
}
$.ajax({
type: "GET",
url: "",
dataType: "json",
data: params,
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function (d) {
if(d!==null){
callback({
//返回的查询结果
recordsTotal: d.pageUtil.total,
recordsFiltered: d.pageUtil.total,
data: d.pageUtil.list
});
}
}
});
},
"columns": [
{"data": "code"},
{"data": "name"},
//表格所对应的字段
],
"columnDefs": [
{
"render": function (data, type, row) {
//这里是替换显示 比如查询结果为1 你可以显示其他的值
if (row.o_status == '0') {
return [
row.o_status = '停用'
].join('');
} else if (row.o_status == '1') {
return [
row.o_status = '启用'
].join('');
} else {
return [
row.o_status = ''
].join('');
}
},
"targets": 6
},
{
//这一步是追加删除链接
"render": function (data, type, row) {
return [
"<a href='' id='dialog_link'>删除</a>"
].join('');
},
"targets": 8
}
]
});
$(document).ready(function() {
$(‘#example').dataTable( {
“bStateSave”: true
} );
} );
<script type="text/javascript"> 
   function dialogClose() { 
     $("#e_Attributes").dialog("close"); 
   } 

   $("#e_Attributes").dialog({ 
     modal: true, 
     autoOpen: false, 
     show: { 
       effect: "blind", 
      duration: 1000 
     }, 
     hide: { 
       effect: "explode", 
       duration: 1000 
    }, 
    width: 400 
   }); 

   var editor; 

   $(function () { 
    //声明datatable 
     $("#gridtable").dataTable().fnDestroy(); 
     editor = $('#gridtable').dataTable({ 
      "bInfo":false, 
      "bServerSide": false, 
      'bPaginate': false,           //是否分页。 
       "bProcessing": false,          //当datatable获取数据时候是否显示正在处理提示信息。 
       'bFilter': false,            //是否使用内置的过滤功能。 
       'bLengthChange': false,         //是否允许用户自定义每页显示条数。 
       'sPaginationType': 'full_numbers',   //分页样式 
     }); 
    //单击,赋值,改样式 
    $("#gridtable tbody tr").click(function (e) { 
      if ($(this).hasClass('row_selected')) { 
        $(this).removeClass('row_selected'); 
        putNullValue() 
      } 
      else { 
        editor.$('tr.row_selected').removeClass('row_selected'); 
        $(this).addClass('row_selected'); 
        var aData = editor.fnGetData(this); 
        if (null != aData) { 
          putValue(aData); 
        } 
      } 
    }); 
    //双击 
    $("#gridtable tbody tr").dblclick(function () { 
      if ($(this).hasClass('row_selected')) { 
        //$(this).removeClass('row_selected'); 
      } 
      else { 
        editor.$('tr.row_selected').removeClass('row_selected'); 
        $(this).addClass('row_selected'); 
      } 

      var aData = editor.fnGetData(this); 
      if (null != aData) { 
        putValue(aData); 
      } 

      $("#hiddenValue").val("edit"); 
      $("#e_Attributes").dialog("open"); 

    }); 
    //添加 
    $("#add").click(function () { 
      editor.$('tr.row_selected').removeClass('row_selected'); 
      putNullValue(); 

      $("#hiddenValue").val("add"); 
      $("#e_Attributes").dialog("open"); 
    }); 
    //编辑 
    $("#edit").click(function () { 
       var productAttributeID = $("#productAttributeID").val(); 
      if (productAttributeID != "" && productAttributeID != null) { 
        $("#hiddenValue").val("edit"); 
        $("#e_Attributes").dialog("open"); 
      } 

    }); 
    //删除 
    $("#delete").click(function () { 
      var productAttributeID = $("#productAttributeID").val(); 
      var productID = $("#productID").val(); 
      if (productAttributeID != null && productAttributeID != "") { 
        if (confirm("Delete?")) { 
          $.ajax({ 
            type: "GET", 
            url: "@Url.Action("DeleteAttribute", "Product")", 
            data: { ProductID: productID, ProductAttributeID: productAttributeID },//参数名要和Action 中的参数名相同 
            dataType: "html", 
            cache: false, 
            success: function (result) { 
              $("#d_Attributes").html(result); 
              $("#productAttributeID").val(null); 
            } 
          }); 
        } 
      } 
    }); 

    //赋空值,并去除input-validation-error样式(此样式不管有无,均可去除,所以不用判断了) 
    function putNullValue() { 
      。。。。。。//此处省略 
    } 
    //赋值 
    function putValue(aData) { 
     。。。。。。//此处省略 
    } 
  }); 

  $.ajaxSetup({ cache: false }); 
</script>

接着就是写dailog的配备跟样式

示例:

地点代码表明:这段代码分别为dialog
的声明,datatables的宣示以add,edit,delete的操作。
加上效劳成效图

html代码

8、彰显数字的翻页样式

 4858美高梅 6

<div id="dialog-message" title="提示">
<p>

是否删除该条数据?
</p>
</div>
$(document).ready(function() {
$(‘#example').dataTable( {
“sPaginationType”: “full_numbers”
} );
} );

编纂功用效应图:

js代码

示例:

4858美高梅 ,               4858美高梅 7

// jquery-ui 对话框设置
$( "#dialog-message" ).dialog({
autoOpen : false,
width : 400,
resizable : false,
modal : true,
title:"",
buttons: [{
html : "确认",
"class" : "btn btn_b",
click : function() {
var code= window.parent.$("#dialog-message").data("code");//这里是获取传入的参数值
location.href=";
$(this).dialog("close");
}
}, {
html : "取消",
"class" : "btn btn_o",
click : function() {
$(this).dialog("close");
}
}]
});

9、水平限制宽度

删除效果图:

接着怎么正是传参数进入对话框

$(document).ready(function() {
$(‘#example').dataTable( {
“sScrollX”: “100%”,
“sScrollXInner”: “110%”,
“bScrollCollapse”: true
} );
} );

 4858美高梅 8

率先定义点击事件弹出对话框

示例:

到此,功用已经整整实现,所需的代码也早就贴出。
4、分页实现

/**
* 弹出对话框并传递参数
*/
$('#table tbody').on( 'click', '#dialog_link', function () {
var table = $('#table').DataTable();
var data = table.row( $(this).parents('tr') ).data();//这里是获取当前你点击的那行的数据
$('#dialog-message').data("code", data.code).dialog('open');//然后传入对话框,打开对话框
return false;
});

10、垂直限制中度

引入CSS文件和JS文件

小编事先向来用

示例:

<style type="text/css" title="currentStyle"> 
    @import "DataTables-1.8.1/media/css/demo_page.css"; 
    @import "DataTables-1.8.1/media/css/demo_table.css"; 
    @import "DataTables-1.8.1/media/css/demo_table_jui.css"; 
</style> 
<script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.js"></script> 
<script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.dataTables.js"></script> 

 -------------------------------------------------------------------------- 

-----------最简单的方式: 
 $(document).ready(function() { 
 $("#example").dataTable(); 
}); 

----------也可以自己定义各属性: 
<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
      $("#example").dataTable({ 
//        "bPaginate": true, //开关,是否显示分页器 
//        "bInfo": true, //开关,是否显示表格的一些信息 
//        "bFilter": true, //开关,是否启用客户端过滤器 
//        "sDom": "<>lfrtip<>", 
//        "bAutoWith": false, 
//        "bDeferRender": false, 
//        "bJQueryUI": false, //开关,是否启用JQueryUI风格 
//        "bLengthChange": true, //开关,是否显示每页大小的下拉框 
//        "bProcessing": true, 
//        "bScrollInfinite": false, 
//        "sScrollY": "800px", //是否开启垂直滚动,以及指定滚动区域大小,可设值:'disabled','2000px' 
//        "bSort": true, //开关,是否启用各列具有按列排序的功能 
//        "bSortClasses": true, 
//        "bStateSave": false, //开关,是否打开客户端状态记录功能。这个数据是记录在cookies中的,打开了这个记录后,即使刷新一次页面,或重新打开浏览器,之前的状态都是保存下来的- ------当值为true时aoColumnDefs不能隐藏列 
//        "sScrollX": "50%", //是否开启水平滚动,以及指定滚动区域大小,可设值:'disabled','2000%' 
//        "aaSorting": [[0, "asc"]], 
//        "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}]//隐藏列 
//        "sDom": '<"H"if>t<"F"if>', 
        "bAutoWidth": false, //自适应宽度 
        "aaSorting": [[1, "asc"]], 
        "sPaginationType": "full_numbers", 
        "oLanguage": { 
          "sProcessing": "正在加载中......", 
          "sLengthMenu": "每页显示 _MENU_ 条记录", 
          "sZeroRecords": "对不起,查询不到相关数据!", 
          "sEmptyTable": "表中无数据存在!", 
          "sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录", 
          "sInfoFiltered": "数据表中共为 _MAX_ 条记录", 
          "sSearch": "搜索", 
          "oPaginate": { 
            "sFirst": "首页", 
            "sPrevious": "上一页", 
            "sNext": "下一页", 
            "sLast": "末页" 
          } 
        } //多语言配置 

      }); 
    }); 
  </script> 
$("#dialog_link").click(function(){
});

11、水平和垂直四个趋势协同限制

对此 dataTables 来说,表格必须经过 thead 和 tbody 进行验证,如下所示,

不精晓怎么向来打不开对话框

示例:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
    <thead> 
      <tr> 
        <th> 
          Rendering engine 
        </th> 
        <th> 
          Browser 
        </th> 
        <th> 
          Platform(s) 
        </th> 
        <th> 
          Engine version 
        </th> 
        <th> 
          CSS grade 
        </th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr class="odd gradeX"> 
        <td> 
          Trident 
        </td> 
        <td> 
          Internet Explorer 4.0 
        </td> 
        <td> 
          Win 95+ 
        </td> 
        <td class="center"> 
          4 
        </td> 
        <td class="center"> 
          X 
        </td> 
      </tr>

瞩目对话框设置必定要放手上边这几个代码的地点

12、改变语言

 若无 thead 将会报错。

以上所述是作者给大家介绍的jQuery dataTables与jQuery UI
对话框dialog的使用教程,希望对大家享有帮助,假如我们有其余疑问请给自个儿留言,小编会及时回复大家的。在此也特别谢谢大家对台本之家网址的支撑!

$(document).ready(function() {
$(‘#example').dataTable( {
“oLanguage”: {
“sLengthMenu”: “每页显示 _MENU_ 条记录”,
“sZeroRecords”: “抱歉, 没有找到”,
“sInfo”: “从 _START_ 到 _END_ /共 _TOTAL_ 条数据”,
“sInfoEmpty”: “没有数据”,
“sInfoFiltered”: “(从 _MAX_ 条数据中检索)”,
“oPaginate”: {
“sFirst”: “首页”,
“sPrevious”: “前一页”,
“sNext”: “后一页”,
“sLast”: “尾页”
},
“sZeroRecords”: “没有检索到数据”,
“sProcessing”: “<img src=\'#\'" /loading.gif' />”
}
} );
} );
  • bPaginate: 是或不是分页,默感觉true,分页
  • iDisplayLength :
    每页的行数,每页默许数量:10
  • sPaginationType:
    分页样式,帮忙二种内置情势,two_button 和 full_numbers, 暗许使用
    two_button。
  • bLengthChange :
    是不是允许用户通过一个下拉列表来抉择分页后每页的行数。行数为
    10,25,50,100。那么些装置供给 bPaginate 扶助。默感到 true。
  • bFilter: 启用或禁止数据过滤,默认为true。 注意,倘若选用过滤效果,可是期望关闭暗中认可的过滤输入框,应采纳sDom
  • bInfo:
    允许也许禁止表音信的来得,默以为 true,显示音讯。

你恐怕感兴趣的篇章:

  • jQuery
    UI库中dialog对话框成效利用全分析
  • 浅析JQuery UI
    Dialog的体制设置难点
  • jQuery UI Dialog
    创造本人的弹出对话框实今世码
  • jquery ui dialog
    ie8出现滚动条的消除措施
  • jQueryUI的Dialog的轻巧包装
  • jquery表格datatables实例分析直接加载和延期加载
  • jQuery插件dataTables增多序号列的办法
  • ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery
    Datatables的注意事项
  • jQuery
    DataTables插件自定义Ajax分页实例解析
  • jQuery表格插件datatables用法计算

示例:

极致简练的利用方法,正是零陈设的法子。

13、click事件

/*
 * Example init
 */
$(document).ready(function(){
  $('#example').dataTable();
});

示例:

以上正是有关jQuery表格插件datatables用法的详实介绍,希望对大家的就学抱有帮助。

14/合作使用tooltip插件

您大概感兴趣的篇章:

  • jQuery表格插件datatables用法总计
  • jQuery
    DataTables插件自定义Ajax分页实例剖判
  • jQuery插件dataTables增多序号列的秘籍
  • jquery表格datatables实例剖判直接加载和推迟加载
  • 动用JQuery达成datatables插件的加码和删除行功效
  • jQuery.datatables.js插件用法及api实例详解
  • jQuery表格插件datatables用法汇总
  • jQuery中Datatables增添跳转到钦点页作用
  • jquery+php完毕导出datatables插件数据到excel的艺术
  • jQuery
    Datatables表头不对齐的消除办法

示例:

15、定义每页展现数据数量

$(document).ready(function() {
$(‘#example').dataTable( {
“aLengthMenu”: [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );

示例:

16、row callback

示例:

最终一列的值假使为“A”则加粗显示

17、排序调整

$(document).ready(function() {
$(‘#example').dataTable( {
“aoColumns”: [
null,
{ "asSorting": [ "asc" ] },
{ “asSorting”: [ "desc", "asc", "asc" ] },
{ “asSorting”: [ ] },
{ “asSorting”: [ ] }
]
} );
} );

示例:

申明:第一列点击按暗中同意意况排序,第二列点击已顺序排列,第三列点击壹遍倒序,二一回顺序,第四五列点击不落到实处排序

18、从配置文件中读取语言包

$(document).ready(function() {
$(‘#example').dataTable( {
“oLanguage”: {
“sUrl”: “cn.txt”
}
} );
} );

19、是用ajax源

$(document).ready(function() {
$(‘#example').dataTable( {
“bProcessing”: true,
“sAjaxSource”: ‘./arrays.txt'
} );
} );

示例:

20、使用ajax,在劳务器端整理数据

$(document).ready(function() {
$(‘#example').dataTable( {
“bProcessing”: true,
“bServerSide”: true,
“sPaginationType”: “full_numbers”,
“sAjaxSource”: “./server_processing.php”,
/*如果加上下面这段内容,则使用post方式传递数据
“fnServerData”: function ( sSource, aoData, fnCallback ) {
$.ajax( {
“dataType”: ‘json',
“type”: “POST”,
“url”: sSource,
“data”: aoData,
“success”: fnCallback
} );
}*/
“oLanguage”: {
“sUrl”: “cn.txt”
},
“aoColumns”: [
{ "sName": "platform" },
{ "sName": "version" },
{ "sName": "engine" },
{ "sName": "browser" },
{ "sName": "grade" }
]//$_GET['sColumns']将接收到aoColumns传递数据
} );
} );

示例:

21、为每行加载id和class

劳动器端重返数据的格式:

{
“DT_RowId”: “row_8″,
“DT_RowClass”: “gradeA”,
“0″: “Gecko”,
“1″: “Firefox 1.5″,
“2″: “Win 98+ / OSX.2+”,
“3″: “1.8″,
“4″: “A”
},

示例:

22、为每行呈现细节,点击行先导的“+”号进行细节呈现

示例:

4858美高梅 9

23、接纳多行

示例:

22、集成jQuery插件jEditable

示例:

更过参照他事他说加以考察:

要专注的是,要被dataTable管理的table对象,必须有thead与tbody,並且,结构要整治(数据不自然要完全),这样手艺精确管理。

以下是在拓展dataTable绑定管理时候能够增大的参数:

4858美高梅 10

4858美高梅 11

4858美高梅 12

4858美高梅 13

以上所述是小编给我们介绍的jQuery.datatables.js插件用法及api实例详解,希望对咱们有着协理,如果咱们有别的疑问请给本人留言,作者会及时还原大家的。在此也特别谢谢大家对台本之家网站的帮衬!

您大概感兴趣的小说:

  • jQuery表格插件datatables用法总计
  • jQuery表格插件datatables用法详解
  • jQuery
    DataTables插件自定义Ajax分页实例解析
  • jQuery插件dataTables增加序号列的主意
  • jquery表格datatables实例分析直接加载和推迟加载
  • 利用JQuery达成datatables插件的加码和删除行功效
  • jQuery表格插件datatables用法汇总
  • jQuery中Datatables增添跳转到钦点页功效
  • jquery+php实现导出datatables插件数据到excel的秘技
  • jQuery
    Datatables表头不对齐的解决办法

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有