datatables，jQuery操作表格的插件datatables如何应用

编程之家2023-11-0884次浏览

大家好，今天小编来为大家解答datatables这个问题，jQuery操作表格的插件datatables如何应用很多人还不知道，现在让我们一起来看看吧！

怎么使用ajax为 datatables 获取数据

dataTables是一种很好用前端表格显示库。当加载大量数据时，可以用Ajax获取数据来提高效率，增速网页加载速率。下面以一个例子作示范。

首先，需要下载jquery以及dataTables库。这里使用的是版本是jQuery v1.11.3和DataTables 1.10.9。下载网址：http://datatables.net/。

先上网页的代码。要注意的是，table中的thead和tbody必须要有。

[html] view plaincopy

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>dataTable example</title>

$(document).ready(function(){

$("#datatable").dataTable({

"processing": true,

"serverSide": true,

"paginationType":"full_numbers",

"ajax":"load",

"columns": [

{"data":"id"},

{"data":"firstName"},

{"data":"lastName"}

]

});

</script>

<style>

h2{

text-align:center;

}

div{

float: left;

margin: 10px;

padding: 4px;

}

margin:5px;

}

table,tr,td,th{

border:2px solid#3aec7b;

border-collapse:collapse;

}

</style>

</head>

<body>

<THEAD>

<tr>

<th>First Name</th>

</tr>

</THEAD>

<tbody>

</tbody>

</TABLE>

</body>

</html>

当网页加载的时候，ajax发出请求，如下所示。

[html] view plaincopy

draw=[1]

columns[0][data]=[id]

columns[0][name]=[]

columns[0][searchable]=[true]

columns[0][orderable]=[false]

columns[0][search][value]=[]

columns[0][search][regex]=[false]

columns[1][data]=[firstName]

columns[1][name]=[]

columns[1][searchable]=[true]

columns[1][orderable]=[true]

columns[1][search][value]=[]

columns[1][search][regex]=[false]

columns[2][data]=[lastName]

columns[2][name]=[]

columns[2][searchable]=[true]

columns[2][orderable]=[true]

columns[2][search][value]=[]

columns[2][search][regex]=[false]

order[0][column]=[0]

order[0][dir]=[asc]

start=[0]

length=[10]

search[value]=[]

search[regex]=[false]

_=[1441278114568]

其中，draw是请求的序号，start是数据的偏移量，length是需要返回的最大数据条数。search[value]是查找的值。

服务端采用java的servlet完成。为简单起见，这里直接采用继承HttpServlet的方式实现。数据本应该从数据库中提取，但这里为了

简单，生成了静态数据集合作为数据源。每次请求都从集合中查找匹配的数据，然后转换成JSON返回。JSON库采用阿里的fastjson。

代码如下所示。

[java] view plaincopy

package jspTest;

import java.io.IOException;

import java.util.ArrayList;

import java.util.Arrays;

import java.util.Enumeration;

import java.util.LinkedList;

import java.util.Random;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;

import com.alibaba.fastjson.JSONObject;

import java.util.List;

import java.util.Map;

/**

* Servlet implementation class DataLoad

public class DataLoad extends HttpServlet{

private static final long serialVersionUID= 1L;

static class Person{

private long id;

private String firstName;

private String lastName;

public long getId(){

return id;

}

public void setId(long id){

this.id= id;

}

public String getFirstName(){

return firstName;

}

public void setFirstName(String firstName){

this.firstName= firstName;

}

public String getLastName(){

return lastName;

}

public void setLastName(String lastName){

this.lastName= lastName;

}

public boolean match(String pattern){

return firstName.contains(pattern)|| lastName.contains(pattern)|| Long.toString(id).contains(pattern);

}

private static Random r= new Random();

private static List<Person> ps= new ArrayList<Person>();

static{

int size= 2512;

for(int k= 0; k< size;++k)

ps.add(generatePerson());

}

static Person generatePerson(){

Person p= new Person();

p.setId(ps.size()+ 1);

p.setFirstName(generateName());

p.setLastName(generateName());

return p;

}

private static String generateName(){

StringBuilder sb= new StringBuilder();

sb.append((char)(r.nextInt(26)+'A'));

int len= 2+ r.nextInt(4);

for(int k= 0; k< len;++k)

sb.append((char)(r.nextInt(26)+'a'));

return sb.toString();

}

private List<Person>result;

public List<Person>getResult(){

return result;

}

/**

*@see HttpServlet#HttpServlet()

public DataLoad(){

super();

}

/**

*@see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse

* response)

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException{

int start=0;

int length=10;

String pattern="";

String draw="1";

Map<String,String[]>params=request.getParameterMap();

for(String attr:params.keySet()){

String[] val=params.get(attr);

System.out.println(attr+"="+Arrays.toString(val));

if(attr.equals("start"))

start=Integer.parseInt(val[0]);

if(attr.equals("length"))

length=Integer.parseInt(val[0]);

if(attr.equals("search[value]"))

pattern=val[0];

if(attr.equals("draw"))

draw=val[0];

}

int total=filter(start, length, pattern);

JSONObject obj= new JSONObject();

obj.put("draw", draw);

obj.put("recordsTotal", ps.size());

obj.put("recordsFiltered", total);

System.out.println(obj.toJSONString());

obj.put("data", result);

response.getWriter().println(obj.toJSONString());

}

/**

*@see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse

* response)

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException{

doGet(request, response);

}

private int filter(int start,int length,String pattern){

result=new LinkedList<Person>();

int total=0;

for(Person s:ps){

if(!s.match(pattern))

continue;

++total;

if(start-->0)

continue;

if(length--<=0)

continue;

result.add(s);

}

return total;

}

public static void main(String[] rags){

System.out.println(JSON.toJSONString(ps));

DataLoad load=new DataLoad();

load.filter(0, 10,"");

System.out.println(JSON.toJSONString(load.getResult()));

load.filter(0, 10,"a");

System.out.println(JSON.toJSONString(load.getResult()));

load.filter(10, 10,"a");

System.out.println(JSON.toJSONString(load.getResult()));

load.filter(20, 10,"a");

System.out.println(JSON.toJSONString(load.getResult()));

}

服务端返回的JSON数据如下所示。其中draw是请求中的draw参数，data是表格中的数据。recordsFiltered是过滤后的数据总数，recordsTotal是原始数据总数。

[html] view plaincopy

{"recordsFiltered":2512,

"data":[{"firstName":"Bzf","id":1,"lastName":"Hazkm"},{"firstName":"Imxi","id":2,"lastName":"Oieb"},{"firstName":"Glyag","id":3,"lastName":"Gvqlf"},{"firstName":"Lwbhl","id":4,"lastName":"Fvvf"},{"firstName":"Audds","id":5,"lastName":"Seunp"},{"firstName":"Otbrq","id":6,"lastName":"Hnal"},{"firstName":"Loji","id":7,"lastName":"Qicn"},{"firstName":"Rjy","id":8,"lastName":"Emrygr"},{"firstName":"Gcglkd","id":9,"lastName":"Ldgrs"},{"firstName":"Txh","id":10,"lastName":"Qwe"}],

"draw":"1",

"recordsTotal":2512}

怎么使用js清楚datatables表格

两种方法

1,dataTable.Clear();

2,dataTable.Rows.Clear();

1，dataTable.Clear()和dataTable.Rows.Clear()都是删除全部的表数据，但不会删除表结构（列信息），使用时不必做区分，任选其一都可以。

2，DataTable.Reset方法。将全部数据和表结构（列信息）都删除。

3，用DataRow.Delete()方法删除行后，DataTable的行数不会变，在foreach语句中仍然可以遍历到删除的行，但是不能访问行中的值，会报System.Data.DeletedRowInaccessibleException的异常。

4，DataTable.GetChanges()方法也可以取到删除后的行，但是也不能访问行中的值，会报异常。

5，DataTable没有显示实现IDisposable接口，对dataTable.Dispose()的调用实际上是调用的DataTable的一个父类MarshalByValueComponent的 Dispose()方法，由于这个原因，Dispose()方法不会清除DataTable的行数据。因此，如果要完全销毁一个DataTable，可以这样写代码：

1 dataTable.Clear();

2 dataTable.Dispose();

3 dataTable= null;

jQuery操作表格的插件datatables如何应用

这次给大家带来jQuery操作表格的插件datatables如何应用，jQuery操作表格的插件datatables应用注意事项有哪些，下面就是实战案例，一起来看一下。

一、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"/>//删除按钮

<p id="e_Attributes">//声明dialog,异步更新

@using(Ajax.BeginForm("Update","Product", new AjaxOptions

{

UpdateTargetId="d_Attributes",

OnSuccess="dialogClose",

HttpMethod="Post",

}))

{

<table>

<tbody>

<tr>

<td>

</tr>

<tr>

<td>Value</td>

<td>

</tr>

<tr>

<td>DisplayOrder</td>

<td>

</tr>

<tr>

<td>

</td>

</tr>

</tbody>

</table>

}

</p>上面代码说明：这段代码主要分了两个部分，第一部分是jquery datatables的声明，<table id="gridtable" class="gridtable">；第二部分是dialog的声明，以及操作所需要的action，此部分的操作选择ajax无刷新页面技术。所需js的代码：

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的操作。

添加功能效果图

编辑功能效果图：

删除效果图：

到此，功能已经全部实现，所需的代码也已经贴出。

4、分页实现

引入CSS文件和JS文件

@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>

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

-----------最简单的方式：

$(document).ready(function(){

$("#example").dataTable();

});

----------也可以自己定义各属性：

$(document).ready(function(){

$("#example&qu

好了，关于datatables和jQuery操作表格的插件datatables如何应用的问题到这里结束啦，希望可以解决您的问题哈！

oracle教程？oracle数据库入门教程文本框旋转 word文档里文本框旋转不了