我加载服务器端处理和数据加载，但我不能分页、排序或使用搜索选项卡。
我的代码是这样的：
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>admin</title>
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/dataTables.bootstrap.css">
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> <img src="images/logo-mini.png" alt="logo intothemarketing" class="img-responsive" height="30px" width="30px" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Articulos</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Listados <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Clientes</a></li>
<li><a href="#">Medios Digitales</a></li>
<li><a href="#">Editores</a></li>
</ul>
</li>
<li><a href="#">Historico</a></li>
<li><a href="#">Facturas</a></li>
<li><a href="#">Registro</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="logout.php">Logout</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div id="tabla" class="row">
<div class="col-md-12">
<table id="miTabla" class="table stripe">
<!--cabecera de la pagina, titulo e icono-->
<div id="edicionok" class="alert alert-success" role="alert">Edicion correta!</div>
<div id="edicionerr" class="alert alert-danger" role="alert">Edicion erronea!</div>
<!--boton añadir doctor-->
<button id="creaDoc" type="button" class="btn btn-success navbar-btn">Añadir doctor</button>
<!--boton añadir doctor-->
<!--tabla-->
<thead>
<th>ID Contenido</th>
<th>Contenido</th>
<th>Fecha Inicio</th>
<th>Fecha Modificación</th>
<th>Descripción</th>
<th>Precio</th>
<th>Cliente</th>
<th>Medio</th>
<th>Editor</th>
<th>Editar</th>
</thead>
<tbody>
</tbody>
<tfoot>
<th>ID Contenido</th>
<th>Contenido</th>
<th>Fecha Inicio</th>
<th>Fecha Modificación</th>
<th>Descripción</th>
<th>Precio</th>
<th>Cliente</th>
<th>Medio</th>
<th>Editor</th>
<th>Editar</th>
</tfoot>
</table>
</div>
</div>
<script src="scripts/jquery.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/bootstrap.growl/bootstrap-growl.js"></script>
<script src="../bower_components/jquery-validate/dist/jquery.validate.js"></script>
<script src="scripts/jquery.dataTables.js"></script>
<script src="scripts/dataTables.bootstrap.js"></script>
<script src="scripts/modal.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>
Main.js
'use strict';
var IdContenido;
$(document).ready(function() {
var miTabla = $('#miTabla').DataTable({
'processing': true,
'serverSide': true,
'ajax': 'php/cargar-publi.php',
'language': {
'sProcessing': 'Procesando...',
'sLengthMenu': 'Mostrar _MENU_ registros',
'sZeroRecords': 'No se encontraron resultados',
'sEmptyTable': 'Ningún dato disponible en esta tabla',
'sInfo': 'Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros',
'sInfoEmpty': 'Mostrando registros del 0 al 0 de un total de 0 registros',
'sInfoFiltered': '(filtrado de un total de _MAX_ registros)',
'sInfoPostFix': '',
'sSearch': 'Buscar:',
'sUrl': '',
'sInfoThousands': ',',
'sLoadingRecords': 'Cargando...',
'oPaginate': {
'sFirst': 'Primero',
'sLast': 'Último',
'sNext': 'Siguiente',
'sPrevious': 'Anterior'
},
'oAria': {
'sSortAscending': ': Activar para ordenar la columna de manera ascendente',
'sSortDescending': ': Activar para ordenar la columna de manera descendente'
}
},
'columns': [
{
'data': 'IdContenido'
}, {
'data': 'contenido'
},{
'data': 'fecha_inicio'
},{
'data': 'fecha_modificacion'
},{
'data': 'descripcion'
},{
'data': 'precio'
},{
'data': 'cliente'
},{
'data': 'medio'
}, {
'data': 'editor',
'render': function(data) {
return '<li>' + data + '</li><br>';
}
}, {
'data': 'IdContenido',
/*añadimos las clases editarbtn y borrarbtn para procesar los eventos click de los botones. No lo hacemos mediante id ya que habrá más de un
botón de edición o borrado*/
'render': function(data) {
return '<a class="btn btn-primary editarbtn" href=http://localhost/php/modificar_contenido.php?id_contenido=' + data + '>Editar</a><a data-toggle="modal" data-target="#basicModal" class="btn btn-warning borrarbtn" href=http://localhost/php/borrar_contenido.php?id_contenido=' + data + '>Borrar</a>';
}
}]
});
} );
PHP文件
<?php
header('Access-Control-Allow-Origin: *');
/*
* DataTables example server-side processing script.
*
* Please note that this script is intentionally extremely simply to show how
* server-side processing can be implemented, and probably shouldn't be used as
* the basis for a large complex system. It is suitable for simple use cases as
* for learning.
*
* See http://datatables.net/usage/server-side for full details on the server-
* side processing requirements of DataTables.
*
* @license MIT - http://datatables.net/license_mit
*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/
// DB table to use
$table = 'vpubli3';
// Table's primary key
$primaryKey = 'id_contenido';
// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier. In this case simple
// indexes
$columns = array(
array( 'db' => 'id_contenido', 'dt' => 'IdContenido' ),
array( 'db' => 'contenido', 'dt' => 'contenido' ),
array( 'db' => 'fecha_inicio', 'dt' => 'fecha_inicio' ),
array( 'db' => 'fecha_modificacion', 'dt' => 'fecha_modificacion' ),
array( 'db' => 'descripcion', 'dt' => 'descripcion' ),
array( 'db' => 'precio', 'dt' => 'precio' ),
array( 'db' => 'cliente', 'dt' => 'cliente' ),
array( 'db' => 'medio', 'dt' => 'medio' ),
array( 'db' => 'editor', 'dt' => 'editor' )
);
// SQL server connection information
$sql_details = array(
'user' => 'root',
'pass' => 'root',
'db' => 'itm',
'host' => 'localhost'
);
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP
* server-side, there is no need to edit below this line.
*/
require( 'ssp.class.php' );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);
我现在没有任何错误，但我有这个错误：
无法读取未定义的第20行的属性默认值
非常感谢
您可以在加载所有记录的列表页面中使用以下功能吗：
<link href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="http://legacy.datatables.net/release-datatables/media/js/jquery.js"></script>
<script src="//legacy.datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#miTabla').dataTable( {
"bProcessing": true,
"bServerSide": true,
"iDisplayLength":50,
"sPaginationType": "full_numbers",
"sAjaxSource": "YOURPHPPAGE.php"
} );
} );
</script>
已经解决了问题。我在js代码中对一个变量的命名不好，这才是真正的问题。在答案中也进行了更正