datatable重新加载ajax数据库,jQuery动态DataTables重新加载

您将需要使用服务器端处理 . 这是我如何做的一个例子 .

$('.dtable').DataTable({

/*

* Shows message dialog of loading data for slow connections

*/

processing: true,

/*

* Does an ajax call to get the data

* Happens every time you search or sort

*/

serverSide: true,

/*

* full_numbers = first, last, next, previous, and numbers

* in the pagation

*/

pagingType: "full_numbers",

/*l = show X entries

* f = search box

* <> = div

*

* t = table

* r = 'proccessing' dialog

* i = 10 out of 1000 records

* p = pagation

* */

dom: 'lftrip',

/*

* Defines the ajax call

*/

ajax: {

url: 'url.php',

datatype: "json",

type: "post",

/*Adds data to ajax call*/

data: function(d) {

d.action = 'list';

}

},

/*Defines columns*/

columns: [

/* Everything in here is sent to server upon ajax call.

* Orderable false = no arrows to order by

* searchable false = doesn't search that column

* */

{

title: "name",

render: function() {

/*

* arguments[2] is the third parameter passed in through the

* function. it holds the entire row data in it.

*/

var row = arguments[2];

return "" + row.name + "";

}

}, {

title: "Info",

"orderable": false,

render: function() {

return arguments[2].email;

}

}, {

title: "Action",

data: 'id',

"orderable": false

}

],

/*Orders from this to that*/

order: [

[0, 'asc']

]

});

function list($REQUEST) {

/*

* Draw is returned back to datatables in order for javascript to not render

* Older draws first in case of async ajax calls.

*/

$draw = $this->aspam($REQUEST, true, 'draw');

/* Query Handles the search field in the datatables plugin */

$query = $this->aspam($this->aspam($REQUEST, false, 'search'), false, 'value');

/* Data holds the extra variables */

$data = $this->aspam($REQUEST, false, 'data');

/* This is the array of order from datatables */

$order = $this->aspam($REQUEST, false, 'order');

/* Where to start the limit */

$start = $this->aspam($REQUEST, true, 'start');

/* how long the limit is */

$length = $this->aspam($REQUEST, true, 'length');

/* Set up all the variables defaults to not throw errors */

$orderby = '';

$where = '';

$first = TRUE;

/* if order is array itterate through it and set the order */

if (is_array($order)) {

foreach ($order as $o) {

if ($first) {

$first = FALSE;

} else {

$orderby .= ',';

}

/* 0 = Name

* $o[dir] is either asc or desc based on datatables

*/

switch ($o['column']) {

case 0:

case '0':

$orderby .= "entity_name $o[dir]";

break;

}

}

/* if not empty create the order by */

if (!empty($orderby)) {

$orderby = "ORDER BY $orderby";

}

}

/* if the search string is not empty search all the searchable fields */

if (!empty($query)) {

$where .= "

AND (

name like '%$query%'

)";

}

/* This is the selection query

* It creates the sql with out and with the where

*/

$sql_nowhere = ($sql = "

select from where

");

$sql_somewhere = ($sql .= "

$where

");

$sql .= "

$orderby

LIMIT $start,$length

";

/*

* after all the where and join clauses are created get the filtered

* count of all the records

*/

$recordsFiltered = $this->getCounts($sql_somewhere);

/* The total amount of records in this call */

$recordsTotal = $this->getCounts($sql_nowhere);

if (!$temp = $this->retrieve($sql)) {

/* if no results are shown create $temp as an empty array to not through errors */

$temp = [];

}

/* creates the datatables array that it likes so it won't through an error */

$array = array(

'draw' => $draw

, 'recordsTotal' => $recordsTotal

, 'recordsFiltered' => $recordsFiltered

, 'data' => $temp

);

return $array;

}

/**

* gets the total count of sql

* @param type $sql

* @return type

*/

function getCounts($sql) {

return $this->retrieve("SELECT count(*) as count FROM ($sql) as z")[0]['count'];

}

除此之外，我建议使用按钮上的click事件来触发删除 .

$('button').click(function() {

var id = $(this).data('id');

deleteMe(id).done(function() {

$('dtable').reload();

});

});

function deleteMe(id) {

/*code for what ever you do with the id.*/

return $.ajax();

}

Me

这个脚本不会帮助你摆脱袖口，但它会指向你正确的方向 .

EDIT

var tables = [];

var options = [{

ajax: 1

}, {

ajax: 2

}, {

ajax: 3

}, {

ajax: 4

}, ];

$('dtable').each(function(index) {

$(this).data('id', index);

tables.push($(this).DataTables(options[index]));

});

$(document).on('click', '.ssDelete', function(e) {

var index = $(this).closest('dtable').data('id');

e.preventDefault();

$.ajax({

url: someFormAction,

type: 'POST',

dataType: 'html',

success: function(data) {

tables[index].ajax.reload();

}

});

});

每次执行数据表时，它都会返回数据表句柄 . 您需要使用该句柄才能刷新表 . 我提出了一种方法，一次添加多个表，没有大量的冗余代码 . 只需确保 options.length 和 dtable.length 是相同的 . 否则你将通过并索引越界 .