datatable ajax示例,dataTable实例

var table;

var u;

$(function(){

var tpl =

$("#tpl").html();

//预编译模板

var template =

Handlebars.compile(tpl);

u = $("input").val();

table=

$('#example').DataTable({

"aLengthMenu" : [2, 4,

6],

ajax: {

url:

u+"/QueryServlet"

},

serverSide: true,

columns: [

{ "data":

"id" },

{ "data":

"name" },

{ "data":

"sex" },

{ "data":

"job" },

],

columnDefs: [

{

targets: 4,//在表格第五列加修改，删除按钮，并执行相应的函数

render: function (a, b, c, d) {

var context

=

{

func: [

{"name": "修改",  "fn": "edit(\'"

+ c.id + "\',\'" + c.name + "\',\'" + c.sex+ "\',\'" + c.job +

"\')", "type": "primary"},

{"name": "删除", "fn": "del(\'" + c.id+ "\')",

"type": "danger"}

]

};

var html =

template(context);

return

html;

}

}

],

"language": {

"lengthMenu": "_MENU_

条记录每页",

"zeroRecords": "没有找到记录",

"info": "第 _PAGE_ 页 ( 总共

_PAGES_ 页 )",

"infoEmpty": "无记录",

"infoFiltered": "(从 _MAX_

条记录过滤)",

"paginate": {

"previous": "上一页",

"next": "下一页"

}

},

});

$("#save").click(add);

});

function add() {

var addJson =

{

"id": $("#id").val(),

"name": $("#name").val(),

"sex": $("#sex").val(),

"job": $("#job").val(),

};

ajax(addJson);

}

function edit(id,name,sex,job)

{

alert("edit");

editFlag =

true;

$("#myModalLabel").text("修改");

$("#id").val(id).attr("disabled",true);

$("#name").val(name);

$("#sex").val(sex);

$("#job").val(job);

$("#myModal").modal("show");

}

function ajax(obj) {

var url ="/add.jsp"

;

if(editFlag){

url = "/edit.jsp";

}

$.ajax({

url:url ,

data: {

"name":

obj.name,

"position": obj.position,

"salary":

obj.salary,

"start_date": obj.start_date,

"office":

obj.office,

"extn":

obj.extn

}, success: function (data) {

table.ajax.reload();

$("#myModal").modal("hide");

$("#myModalLabel").text("新增");

clear();

console.log("结果" + data);

}

});

}

function del(id) {

//传到后台进行删除

$.ajax({

url : u+"/DelServlet" ,

data: {

"id":

id

},

success: function (data) {

table.ajax.reload();

}

});

//未连接数据库

//点击删除

alert(

t.rows('.selected').data().length +' row(s) selected' );

t.rows('.selected').remove().draw( false

);

}

​