Tabla de pedidos con filtro de búsqueda desarrollada con PHP y MySQL

En este tutorial voy a compartir un fragmento de código que nos ayudará a la hora de crear una tabla de pedidos con filtro de búsqueda desarrollada con PHP, MySQL y Bootstrap

La idea de este ejemplo es proporcionar la forma básica a programadores principiantes para que puedan crear una tabla con filtro de búsqueda, y que puedan tomarlo como una base para trabajar en sus proyectos web.

Tecnologías utilizadas:

HTML
PHP con MySQL
jQuery
Bootstrap
CSS
AJAX

Tabla de pedidos con filtro de búsqueda desarrollada con PHP, MySQL y Bootstrap

Comencemos por crear nuestra aplicación web de demostración para aprender como filtrar datos con PHP, MySQL y Bootstrap, lo primero que vamos a ver es crear una base de datos y tablas requeridas. Para este ejemplo yo he nombrado la base de datos “tuto_orders“, pero tu puedes nombrar como desees. El código SQL para crear la tabla que guardará las ordenes es el siguiente:

Crear la base de datos MySQL y tabla requerida:

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Base de datos: `tuto_orders`
--

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

--
-- Estructura de tabla para la tabla `orders`
--

CREATE TABLE `orders` (
  `id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `location` varchar(255) NOT NULL,
  `date` datetime NOT NULL,
  `status` varchar(50) NOT NULL,
  `total` double NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Volcado de datos para la tabla `orders`
--

INSERT INTO `orders` (`id`, `name`, `location`, `date`, `status`, `total`) VALUES
(1, 'Leanne Graham', 'Berlin', '2020-04-24 10:00:00', 'Entregado', 9.99),
(2, 'Ervin Howell', 'Berlin', '2020-04-24 10:00:00', 'Entregado', 9.99),
(3, 'Clementine Bauch', 'Berlin', '2020-04-24 10:00:00', 'Entregado', 9.99),
(4, 'Patricia Lebsack', 'Berlin', '2020-04-24 10:00:00', 'Entregado', 9.99),
(5, 'Chelsey Dietrich', 'Berlin', '2020-04-24 10:00:00', 'Entregado', 9.99),
(6, 'Mrs. Dennis Schulist', 'Berlin', '2020-04-24 10:00:00', 'Entregado', 9.99),
(7, 'Kurtis Weissnat', 'Berlin', '2020-04-24 10:00:00', 'Entregado', 9.99),
(8, 'Nicholas Runolfsdottir V', 'Berlin', '2020-04-24 10:00:00', 'Entregado', 9.99),
(9, 'Glenna Reichert', 'Berlin', '2020-04-24 10:00:00', 'Entregado', 9.99),
(10, 'Clementina DuBuque', 'Berlin', '2020-04-24 10:00:00', 'Entregado', 9.99),
(11, 'Leanne Graham', 'London', '2020-04-24 10:00:00', 'Enviada', 12.99),
(12, 'Ervin Howell', 'London', '2020-04-24 10:00:00', 'Enviada', 12.99),
(13, 'Clementine Bauch', 'London', '2020-04-24 10:00:00', 'Enviada', 12.99),
(14, 'Patricia Lebsack', 'London', '2020-04-24 10:00:00', 'Enviada', 12.99),
(15, 'Chelsey Dietrich', 'London', '2020-04-24 10:00:00', 'Enviada', 12.99),
(16, 'Mrs. Dennis Schulist', 'London', '2020-04-24 10:00:00', 'Enviada', 12.99),
(17, 'Kurtis Weissnat', 'London', '2020-04-24 10:00:00', 'Enviada', 12.99),
(18, 'Nicholas Runolfsdottir V', 'London', '2020-04-24 10:00:00', 'Enviada', 12.99),
(19, 'Glenna Reichert', 'London', '2020-04-24 10:00:00', 'Enviada', 12.99),
(20, 'Clementina DuBuque', 'London', '2020-04-24 10:00:00', 'Enviada', 12.99),
(21, 'Leanne Graham', 'Madrid', '2020-04-24 10:00:00', 'Pendiente', 29.99),
(22, 'Ervin Howell', 'Madrid', '2020-04-24 10:00:00', 'Pendiente', 29.99),
(23, 'Clementine Bauch', 'Madrid', '2020-04-24 10:00:00', 'Pendiente', 29.99),
(24, 'Patricia Lebsack', 'Madrid', '2020-04-24 10:00:00', 'Pendiente', 29.99),
(25, 'Chelsey Dietrich', 'Madrid', '2020-04-24 10:00:00', 'Pendiente', 29.99),
(26, 'Mrs. Dennis Schulist', 'Madrid', '2020-04-24 10:00:00', 'Pendiente', 29.99),
(27, 'Kurtis Weissnat', 'Madrid', '2020-04-24 10:00:00', 'Pendiente', 29.99),
(28, 'Nicholas Runolfsdottir V', 'Madrid', '2020-04-24 10:00:00', 'Pendiente', 29.99),
(29, 'Glenna Reichert', 'Madrid', '2020-04-24 10:00:00', 'Pendiente', 29.99),
(30, 'Clementina DuBuque', 'Madrid', '2020-04-24 10:00:00', 'Pendiente', 29.99),
(31, 'Leanne Graham', 'Paris', '2020-04-24 10:00:00', 'Cancelado', 4.99),
(32, 'Ervin Howell', 'Paris', '2020-04-24 10:00:00', 'Cancelado', 4.99),
(33, 'Clementine Bauch', 'Paris', '2020-04-24 10:00:00', 'Cancelado', 4.99),
(34, 'Patricia Lebsack', 'Paris', '2020-04-24 10:00:00', 'Cancelado', 4.99),
(35, 'Chelsey Dietrich', 'Paris', '2020-04-24 10:00:00', 'Cancelado', 4.99),
(36, 'Mrs. Dennis Schulist', 'Paris', '2020-04-24 10:00:00', 'Cancelado', 4.99),
(37, 'Kurtis Weissnat', 'Paris', '2020-04-24 10:00:00', 'Cancelado', 4.99),
(38, 'Nicholas Runolfsdottir V', 'Paris', '2020-04-24 10:00:00', 'Cancelado', 4.99),
(39, 'Glenna Reichert', 'Paris', '2020-04-24 10:00:00', 'Cancelado', 4.99),
(40, 'Clementina DuBuque', 'Paris', '2020-04-24 10:00:00', 'Cancelado', 4.99);

--
-- Índices para tablas volcadas
--

--
-- Indices de la tabla `orders`
--
ALTER TABLE `orders`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT de las tablas volcadas
--

--
-- AUTO_INCREMENT de la tabla `orders`
--
ALTER TABLE `orders`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=41;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

100

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET AUTOCOMMIT = 0;

START TRANSACTION;

SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8mb4 */;

-- Base de datos: `tuto_orders`

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

-- Estructura de tabla para la tabla `orders`

CREATE TABLE `orders` (

`id` int(11) NOT NULL,

`name` varchar(255) NOT NULL,

`location` varchar(255) NOT NULL,

`date` datetime NOT NULL,

`status` varchar(50) NOT NULL,

`total` double NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Volcado de datos para la tabla `orders`

INSERT INTO `orders` (`id`, `name`, `location`, `date`, `status`, `total`) VALUES

(1, 'Leanne Graham', 'Berlin', '2020-04-24 10:00:00', 'Entregado', 9.99),

(2, 'Ervin Howell', 'Berlin', '2020-04-24 10:00:00', 'Entregado', 9.99),

(3, 'Clementine Bauch', 'Berlin', '2020-04-24 10:00:00', 'Entregado', 9.99),

(4, 'Patricia Lebsack', 'Berlin', '2020-04-24 10:00:00', 'Entregado', 9.99),

(5, 'Chelsey Dietrich', 'Berlin', '2020-04-24 10:00:00', 'Entregado', 9.99),

(6, 'Mrs. Dennis Schulist', 'Berlin', '2020-04-24 10:00:00', 'Entregado', 9.99),

(7, 'Kurtis Weissnat', 'Berlin', '2020-04-24 10:00:00', 'Entregado', 9.99),

(8, 'Nicholas Runolfsdottir V', 'Berlin', '2020-04-24 10:00:00', 'Entregado', 9.99),

(9, 'Glenna Reichert', 'Berlin', '2020-04-24 10:00:00', 'Entregado', 9.99),

(10, 'Clementina DuBuque', 'Berlin', '2020-04-24 10:00:00', 'Entregado', 9.99),

(11, 'Leanne Graham', 'London', '2020-04-24 10:00:00', 'Enviada', 12.99),

(12, 'Ervin Howell', 'London', '2020-04-24 10:00:00', 'Enviada', 12.99),

(13, 'Clementine Bauch', 'London', '2020-04-24 10:00:00', 'Enviada', 12.99),

(14, 'Patricia Lebsack', 'London', '2020-04-24 10:00:00', 'Enviada', 12.99),

(15, 'Chelsey Dietrich', 'London', '2020-04-24 10:00:00', 'Enviada', 12.99),

(16, 'Mrs. Dennis Schulist', 'London', '2020-04-24 10:00:00', 'Enviada', 12.99),

(17, 'Kurtis Weissnat', 'London', '2020-04-24 10:00:00', 'Enviada', 12.99),

(18, 'Nicholas Runolfsdottir V', 'London', '2020-04-24 10:00:00', 'Enviada', 12.99),

(19, 'Glenna Reichert', 'London', '2020-04-24 10:00:00', 'Enviada', 12.99),

(20, 'Clementina DuBuque', 'London', '2020-04-24 10:00:00', 'Enviada', 12.99),

(21, 'Leanne Graham', 'Madrid', '2020-04-24 10:00:00', 'Pendiente', 29.99),

(22, 'Ervin Howell', 'Madrid', '2020-04-24 10:00:00', 'Pendiente', 29.99),

(23, 'Clementine Bauch', 'Madrid', '2020-04-24 10:00:00', 'Pendiente', 29.99),

(24, 'Patricia Lebsack', 'Madrid', '2020-04-24 10:00:00', 'Pendiente', 29.99),

(25, 'Chelsey Dietrich', 'Madrid', '2020-04-24 10:00:00', 'Pendiente', 29.99),

(26, 'Mrs. Dennis Schulist', 'Madrid', '2020-04-24 10:00:00', 'Pendiente', 29.99),

(27, 'Kurtis Weissnat', 'Madrid', '2020-04-24 10:00:00', 'Pendiente', 29.99),

(28, 'Nicholas Runolfsdottir V', 'Madrid', '2020-04-24 10:00:00', 'Pendiente', 29.99),

(29, 'Glenna Reichert', 'Madrid', '2020-04-24 10:00:00', 'Pendiente', 29.99),

(30, 'Clementina DuBuque', 'Madrid', '2020-04-24 10:00:00', 'Pendiente', 29.99),

(31, 'Leanne Graham', 'Paris', '2020-04-24 10:00:00', 'Cancelado', 4.99),

(32, 'Ervin Howell', 'Paris', '2020-04-24 10:00:00', 'Cancelado', 4.99),

(33, 'Clementine Bauch', 'Paris', '2020-04-24 10:00:00', 'Cancelado', 4.99),

(34, 'Patricia Lebsack', 'Paris', '2020-04-24 10:00:00', 'Cancelado', 4.99),

(35, 'Chelsey Dietrich', 'Paris', '2020-04-24 10:00:00', 'Cancelado', 4.99),

(36, 'Mrs. Dennis Schulist', 'Paris', '2020-04-24 10:00:00', 'Cancelado', 4.99),

(37, 'Kurtis Weissnat', 'Paris', '2020-04-24 10:00:00', 'Cancelado', 4.99),

(38, 'Nicholas Runolfsdottir V', 'Paris', '2020-04-24 10:00:00', 'Cancelado', 4.99),

(39, 'Glenna Reichert', 'Paris', '2020-04-24 10:00:00', 'Cancelado', 4.99),

(40, 'Clementina DuBuque', 'Paris', '2020-04-24 10:00:00', 'Cancelado', 4.99);

-- Índices para tablas volcadas

-- Indices de la tabla `orders`

ALTER TABLE `orders`

ADD PRIMARY KEY (`id`);

-- AUTO_INCREMENT de las tablas volcadas

-- AUTO_INCREMENT de la tabla `orders`

ALTER TABLE `orders`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=41;

COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Estructura básica del index.html:

Crea el archivo llamado “index.html” e incluye los archivos básicos para que jQuery y Bootstrap funcionen, tal como se muestra a continuación:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tabla de pedidos con filtro de búsqueda desarrollada con PHP, MySQL y Bootstrap</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
    <div class="container">
        <div class="table-wrapper">
            <div class="table-title">
                <div class="row">
                    <div class="col-sm-4">
						<h2>Detalle de la<b> orden</b></h2>
					</div>
					
                </div>
            </div>

            <div class="row text-center" id="loader" style="position: absolute;top: 140px;left: 50%">
				
			</div>


			<div class="table-filter">
				<div class="row">
                    
                    <div class="col-sm-9">
						<button type="button" class="btn btn-primary"><i class="fa fa-search" onclick="load(1);"></i></button>
						<div class="filter-group">
							<label>Nombre</label>
							<input type="text" class="form-control" id="name">
						</div>
						<div class="filter-group">
							<label>Ubicación</label>
							<select class="form-control" id="location" onchange="load(1);"> 
								<option value="">Todos</option>
								<option value="Berlin">Berlin</option>
								<option value="London">London</option>
								<option value="Madrid">Madrid</option>
								<option value="New York">New York</option>
								<option value="Paris">Paris</option>								
							</select>
						</div>
						<div class="filter-group">
							<label>Estado</label>
							<select class="form-control" id="status" onchange="load(1);">
								<option value="">Todos</option>
								<option value="Entregado">Entregado</option>
								<option value="Enviada">Enviada</option>
								<option value="Pendiente">Pendiente</option>
								<option value="Cancelado">Cancelado</option>
							</select>
						</div>
						<span class="filter-icon"><i class="fa fa-filter"></i></span>
                    </div>

                    <div class="col-sm-3 text-right">
						<div class="show-entries">
							<span>Mostrar</span>
							<select class="form-control" id="per_page" onchange="load(1);">
								<option>5</option>
								<option>10</option>
								<option selected="">15</option>
								<option>20</option>
							</select>
							
						</div>
					</div>


                </div>
			</div>
		<div class="datos_ajax">

		</div>	
            
			
        </div>
    </div>     
</body>
</html>

<!DOCTYPE html>

<head>

<title>Tabla de pedidos con filtro de búsqueda desarrollada con PHP, MySQL y Bootstrap</title>

</head>

<body>

<h2>Detalle de la<b> orden</b></h2>

</div>

</div>

<label>Nombre</label>

</div>

<label>Ubicación</label>

<option value="">Todos</option>

<option value="Berlin">Berlin</option>

<option value="London">London</option>

<option value="Madrid">Madrid</option>

<option value="Paris">Paris</option>

</select>

</div>

<label>Estado</label>

<option value="">Todos</option>

<option value="Entregado">Entregado</option>

<option value="Enviada">Enviada</option>

<option value="Pendiente">Pendiente</option>

<option value="Cancelado">Cancelado</option>

</select>

</div>

</div>

<span>Mostrar</span>

</select>

</div>

</div>

</body>

</html>

Ahora que hemos creado el archivo index.html, debemos crear un directorio llamado “css“, y en dicho directorio vamos a crear el archivo llamado style.css, el le añade un poco de estética a nuestra tabla, el codigo para el archivo style.css es el siguiente:

style.css

    body {
        color: #566787;
		background: #f5f5f5;
		font-family: 'Varela Round', sans-serif;
		font-size: 13px;
	}
	.table-wrapper {
        background: #fff;
        padding: 20px 25px;
        margin: 30px auto;
		border-radius: 3px;
        box-shadow: 0 1px 1px rgba(0,0,0,.05);
    }
	.table-wrapper .btn {
		float: right;
		color: #333;
    	background-color: #fff;
		border-radius: 3px;
		border: none;
		outline: none !important;
		margin-left: 10px;
	}
	.table-wrapper .btn:hover {
        color: #333;
		background: #f2f2f2;
	}
	.table-wrapper .btn.btn-primary {
		color: #fff;
		background: #03A9F4;
	}
	.table-wrapper .btn.btn-primary:hover {
		background: #03a3e7;
	}
	.table-title .btn {		
		font-size: 13px;
		border: none;
	}
	.table-title .btn i {
		float: left;
		font-size: 21px;
		margin-right: 5px;
	}
	.table-title .btn span {
		float: left;
		margin-top: 2px;
	}
	.table-title {
		color: #fff;
		background: #3498db;		
		padding: 16px 25px;
		margin: -20px -25px 10px;
		border-radius: 3px 3px 0 0;
    }
    .table-title h2 {
		margin: 5px 0 0;
		font-size: 24px;
	}
	.show-entries select.form-control {        
        width: 80px;
		margin: 0 5px;
	}
	.table-filter .filter-group {
        float: right;
		margin-left: 15px;
    }
	.table-filter input, .table-filter select {
		height: 34px;
		border-radius: 3px;
		border-color: #ddd;
        box-shadow: none;
	}
	.table-filter {
		padding: 5px 0 15px;
		border-bottom: 1px solid #e9e9e9;
		margin-bottom: 5px;
	}
	.table-filter .btn {
		height: 34px;
	}
	.table-filter label {
		font-weight: normal;
		margin-left: 10px;
	}
	.table-filter select, .table-filter input {
		display: inline-block;
		margin-left: 5px;
	}
	.table-filter input {
		width: 200px;
		display: inline-block;
	}
	.filter-group select.form-control {
		width: 110px;
	}
	.filter-icon {
		float: right;
		margin-top: 7px;
	}
	.filter-icon i {
		font-size: 18px;
		opacity: 0.7;
	}	
    table.table tr th, table.table tr td {
        border-color: #e9e9e9;
		padding: 12px 15px;
		vertical-align: middle;
    }
	table.table tr th:first-child {
		width: 60px;
	}
	table.table tr th:last-child {
		width: 80px;
	}
    table.table-striped tbody tr:nth-of-type(odd) {
    	background-color: #fcfcfc;
	}
	table.table-striped.table-hover tbody tr:hover {
		background: #f5f5f5;
	}
    table.table th i {
        font-size: 13px;
        margin: 0 5px;
        cursor: pointer;
    }	
	table.table td a {
		font-weight: bold;
		color: #566787;
		display: inline-block;
		text-decoration: none;
	}
	table.table td a:hover {
		color: #2196F3;
	}
	table.table td a.view {        
		width: 30px;
		height: 30px;
		color: #2196F3;
		border: 2px solid;
		border-radius: 30px;
		text-align: center;
    }
    table.table td a.view i {
        font-size: 22px;
		margin: 2px 0 0 1px;
    }   
	table.table .avatar {
		border-radius: 50%;
		vertical-align: middle;
		margin-right: 10px;
	}
	.status {
		font-size: 30px;
		margin: 2px 2px 0 0;
		display: inline-block;
		vertical-align: middle;
		line-height: 10px;
	}
    .text-success {
        color: #10c469;
    }
    .text-info {
        color: #62c9e8;
    }
    .text-warning {
        color: #FFC107;
    }
    .text-danger {
        color: #ff5b5b;
    }
    .pagination {
        float: right;
        margin: 0 0 5px;
    }
    .pagination li a {
        border: none;
        font-size: 13px;
        min-width: 30px;
        min-height: 30px;
        color: #999;
        margin: 0 2px;
        line-height: 30px;
        border-radius: 2px !important;
        text-align: center;
        padding: 0 6px;
    }
    .pagination li a:hover {
        color: #666;
    }	
    .pagination li.active a {
        background: #03A9F4;
    }
    .pagination li.active a:hover {        
        background: #0397d6;
    }
	.pagination li.disabled i {
        color: #ccc;
    }
    .pagination li i {
        font-size: 16px;
        padding-top: 6px
    }
    .hint-text {
        float: left;
        margin-top: 10px;
        font-size: 13px;
    }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

body {

color: #566787;

background: #f5f5f5;

font-family: 'Varela Round', sans-serif;

font-size: 13px;

}

.table-wrapper {

background: #fff;

padding: 20px 25px;

margin: 30px auto;

border-radius: 3px;

box-shadow: 0 1px 1px rgba(0,0,0,.05);

}

.table-wrapper .btn {

float: right;

color: #333;

background-color: #fff;

border-radius: 3px;

border: none;

outline: none !important;

margin-left: 10px;

}

.table-wrapper .btn:hover {

color: #333;

background: #f2f2f2;

}

.table-wrapper .btn.btn-primary {

color: #fff;

background: #03A9F4;

}

.table-wrapper .btn.btn-primary:hover {

background: #03a3e7;

}

.table-title .btn {

font-size: 13px;

border: none;

}

.table-title .btn i {

float: left;

font-size: 21px;

margin-right: 5px;

}

.table-title .btn span {

float: left;

margin-top: 2px;

}

.table-title {

color: #fff;

background: #3498db;

padding: 16px 25px;

margin: -20px -25px 10px;

border-radius: 3px 3px 0 0;

}

.table-title h2 {

margin: 5px 0 0;

font-size: 24px;

}

.show-entries select.form-control {

width: 80px;

margin: 0 5px;

}

.table-filter .filter-group {

float: right;

margin-left: 15px;

}

.table-filter input, .table-filter select {

height: 34px;

border-radius: 3px;

border-color: #ddd;

box-shadow: none;

}

.table-filter {

padding: 5px 0 15px;

border-bottom: 1px solid #e9e9e9;

margin-bottom: 5px;

}

.table-filter .btn {

height: 34px;

}

.table-filter label {

font-weight: normal;

margin-left: 10px;

}

.table-filter select, .table-filter input {

display: inline-block;

margin-left: 5px;

}

.table-filter input {

width: 200px;

display: inline-block;

}

.filter-group select.form-control {

width: 110px;

}

.filter-icon {

float: right;

margin-top: 7px;

}

.filter-icon i {

font-size: 18px;

opacity: 0.7;

}

table.table tr th, table.table tr td {

border-color: #e9e9e9;

padding: 12px 15px;

vertical-align: middle;

}

table.table tr th:first-child {

width: 60px;

}

table.table tr th:last-child {

width: 80px;

}

table.table-striped tbody tr:nth-of-type(odd) {

background-color: #fcfcfc;

}

table.table-striped.table-hover tbody tr:hover {

background: #f5f5f5;

}

table.table th i {

font-size: 13px;

margin: 0 5px;

cursor: pointer;

}

table.table td a {

font-weight: bold;

color: #566787;

display: inline-block;

text-decoration: none;

}

table.table td a:hover {

color: #2196F3;

}

table.table td a.view {

width: 30px;

height: 30px;

color: #2196F3;

border: 2px solid;

border-radius: 30px;

text-align: center;

}

table.table td a.view i {

font-size: 22px;

margin: 2px 0 0 1px;

}

table.table .avatar {

border-radius: 50%;

vertical-align: middle;

margin-right: 10px;

}

.status {

font-size: 30px;

margin: 2px 2px 0 0;

display: inline-block;

vertical-align: middle;

line-height: 10px;

}

.text-success {

color: #10c469;

}

.text-info {

color: #62c9e8;

}

.text-warning {

color: #FFC107;

}

.text-danger {

color: #ff5b5b;

}

.pagination {

float: right;

margin: 0 0 5px;

}

.pagination li a {

border: none;

font-size: 13px;

min-width: 30px;

min-height: 30px;

color: #999;

margin: 0 2px;

line-height: 30px;

border-radius: 2px !important;

text-align: center;

padding: 0 6px;

}

.pagination li a:hover {

color: #666;

}

.pagination li.active a {

background: #03A9F4;

}

.pagination li.active a:hover {

background: #0397d6;

}

.pagination li.disabled i {

color: #ccc;

}

.pagination li i {

font-size: 16px;

padding-top: 6px

}

.hint-text {

float: left;

margin-top: 10px;

font-size: 13px;

}

Ahora vamos a crear un nuevo directorio dentro de la carpeta raíz de nuestro proyecto el cual nombraremos “js“, y dentro de dicho directorio un archivo llamado script.js. El código que debe incluir dicho archivo es el siguiente.

script.js

		$(function() {
			load(1);
		});
		function load(page){
			var query=$("#name").val();
			var location=$("#location").val();
			var status=$("#status").val();
			var per_page=$("#per_page").val();
			var parametros = {"action":"ajax","page":page,'query':query,'location':location,'status':status,'per_page':per_page};
			$("#loader").fadeIn('slow');
			$.ajax({
				url:'ajax.php',
				data: parametros,
				 beforeSend: function(objeto){
				$("#loader").html("Cargando...");
			  },
				success:function(data){
					$(".datos_ajax").html(data).fadeIn('slow');
					$("#loader").html("");
				}
			})
		}

$(function() {

load(1);

});

function load(page){

var query=$("#name").val();

var location=$("#location").val();

var status=$("#status").val();

var per_page=$("#per_page").val();

var parametros = {"action":"ajax","page":page,'query':query,'location':location,'status':status,'per_page':per_page};

$("#loader").fadeIn('slow');

$.ajax({

url:'ajax.php',

data: parametros,

beforeSend: function(objeto){

$("#loader").html("Cargando...");

success:function(data){

$(".datos_ajax").html(data).fadeIn('slow');

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

}

})

}

Lo que hace el anterior es mandar a llamar mediante jQuery ajax un archivo llamado ajax.php. El cual se encarga de la interacción con la base de datos MySQL.

Creando archivo ajax.php:

Ahora vamos a crear un archivo llamado ajax.php en el directorio raíz de nuestro proyecto, debe contener el siguiente código.

ajax.php

<?php
$action = (isset($_REQUEST['action'])&& $_REQUEST['action'] !=NULL)?$_REQUEST['action']:'';
if($action == 'ajax'){
	
	include('clases/orders.php');
	$database=new orders();
	//Recibir variables enviadas
	$query=strip_tags($_REQUEST['query']);
	$location=strip_tags($_REQUEST['location']);
	$status=strip_tags($_REQUEST['status']);
	$per_page=intval($_REQUEST['per_page']);
	$tables="orders";
	$campos="*";
	//Variables de paginación
	$page = (isset($_REQUEST['page']) && !empty($_REQUEST['page']))?$_REQUEST['page']:1;
	$adjacents  = 4; //espacio entre páginas después del número de adyacentes
	$offset = ($page - 1) * $per_page;
	
	
	$search=array("query"=>$query,"location"=>$location,"status"=>$status,"per_page"=>$per_page,"offset"=>$offset);
	//consulta principal para recuperar los datos
	$datos=$database->getData($tables,$campos,$search);
	$countAll=$database->getCounter();
	$row = $countAll;
	
	if ($row>0){
		$numrows = $countAll;;
	} else {
		$numrows=0;
	}	
	$total_pages = ceil($numrows/$per_page);
	
	
	//Recorrer los datos recuperados

	if ($numrows>0){
		?>
	 <table class="table table-striped table-hover ">	
		<thead>
            <tr>
                <th>#</th>
                <th>Cliente</th>
				<th>Ubicación</th>
				<th>Fecha</th>						
                <th>Estado</th>						
				<th>Total</th>
				<th>Acción</th>
            </tr>
        </thead>
        <tbody>
		<?php
		$finales=0;
		foreach ($datos as $key=>$row){
				$status_order=$row['status'];
				if ($status_order=='Entregado'){
					$class_css="text-success";
				} elseif ($status_order=='Cancelado'){
					$class_css="text-danger";
				} elseif ($status_order=='Pendiente'){
					$class_css="text-warning";
				} elseif ($status_order=='Enviada'){
					$class_css="text-info";
				} else {
					$class_css="";
				}
			?>
		<tr>
		    <td><?=$row['id'];?></td>
		    <td><a href="#"><img src="img/1.png" class="avatar" alt="Avatar"> <?=$row['name'];?></a></td>
			<td><?=$row['location'];?></td>
		    <td><?=date("d/m/Y", strtotime($row['date']));?></td>                        
			<td><span class="status <?=$class_css; ?>">&bull;</span> <?=$status_order;?></td>
			<td>$<?=$row['total'];?></td>
			<td><a href="#" class="view" title="View Details" data-toggle="tooltip"><i class="material-icons">&#xE5C8;</i></a></td>
		</tr>
			<?php
			$finales++;
		}	
	?>
		</tbody>
		</table>
		<div class="clearfix">
			<?php 
				$inicios=$offset+1;
				$finales+=$inicios -1;
				echo '<div class="hint-text">Mostrando '.$inicios.' al '.$finales.' de '.$numrows.' registros</div>';
				
				
				include 'clases/pagination.php'; //include pagination class
				$pagination=new Pagination($page, $total_pages, $adjacents);
				echo $pagination->paginate();

			?>
        </div>
	<?php
	}
}
?>

<?php

$action = (isset($_REQUEST['action'])&& $_REQUEST['action'] !=NULL)?$_REQUEST['action']:'';

if($action == 'ajax'){

include('clases/orders.php');

$database=new orders();

//Recibir variables enviadas

$query=strip_tags($_REQUEST['query']);

$location=strip_tags($_REQUEST['location']);

$status=strip_tags($_REQUEST['status']);

$per_page=intval($_REQUEST['per_page']);

$tables="orders";

$campos="*";

//Variables de paginación

$page = (isset($_REQUEST['page']) && !empty($_REQUEST['page']))?$_REQUEST['page']:1;

$adjacents = 4; //espacio entre páginas después del número de adyacentes

$offset = ($page - 1) * $per_page;

$search=array("query"=>$query,"location"=>$location,"status"=>$status,"per_page"=>$per_page,"offset"=>$offset);

//consulta principal para recuperar los datos

$datos=$database->getData($tables,$campos,$search);

$countAll=$database->getCounter();

$row = $countAll;

if ($row>0){

$numrows = $countAll;;

} else {

$numrows=0;

}

$total_pages = ceil($numrows/$per_page);

//Recorrer los datos recuperados

if ($numrows>0){

<thead>

<tr>

<th>Cliente</th>

<th>Ubicación</th>

<th>Fecha</th>

<th>Estado</th>

<th>Total</th>

<th>Acción</th>

</tr>

</thead>

<tbody>

<?php

$finales=0;

foreach ($datos as $key=>$row){

$status_order=$row['status'];

if ($status_order=='Entregado'){

$class_css="text-success";

} elseif ($status_order=='Cancelado'){

$class_css="text-danger";

} elseif ($status_order=='Pendiente'){

$class_css="text-warning";

} elseif ($status_order=='Enviada'){

$class_css="text-info";

} else {

$class_css="";

}

<tr>

</tr>

<?php

$finales++;

}

</tbody>

</table>

<?php

$inicios=$offset+1;

$finales+=$inicios -1;

echo '<div class="hint-text">Mostrando '.$inicios.' al '.$finales.' de '.$numrows.' registros</div>';

include 'clases/pagination.php'; //include pagination class

$pagination=new Pagination($page, $total_pages, $adjacents);

echo $pagination->paginate();

</div>

<?php

}

El código anterior se encarga de crear interacción con la base de datos.

Conexión de nuestra con la base de datos

Para conectarme con la base de datos mysql, he usado la extensión mysqli y realizado una conexión orientada a objetos, vamos a crear una carpeta llamada “clases” y dentro de ella los siguientes tres clases.

1 ) – database.php

<?php
/**
 	--------------------------
	Autor: Obed Alvarado
	Web: obedalvarado.pw
	Mail: info@obedalvarado.pw
	----------------------------
 
*/
class database{
	private $host='localhost';//generalmente suele ser "127.0.0.1"
	private $user='root';//Usuario de tu base de datos
	private $pass='';//Contraseña del usuario de la base de datos
	private $db='tuto_orders';//Nombre de la base de datos
	public $counter;//Propiedad para almacenar el numero de registro devueltos por la consulta
	
	public  function conectar(){
		$conexion = new mysqli($this->host, $this->user, $this->pass, $this->db);
		$conexion->query("SET NAMES 'utf8'");
		return $conexion;
	}
}
?>

<?php

/**

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

Autor: Obed Alvarado

Web: obedalvarado.pw

Mail: info@obedalvarado.pw

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

class database{

private $host='localhost';//generalmente suele ser "127.0.0.1"

private $user='root';//Usuario de tu base de datos

private $pass='';//Contraseña del usuario de la base de datos

private $db='tuto_orders';//Nombre de la base de datos

public $counter;//Propiedad para almacenar el numero de registro devueltos por la consulta

public function conectar(){

$conexion = new mysqli($this->host, $this->user, $this->pass, $this->db);

$conexion->query("SET NAMES 'utf8'");

return $conexion;

}

Esta clase database se encarga de crear un objecto para poder conectarse a la base de datos, es muy importante poder asignar un valor a las variables de conexión segun corresponda en tu servidor web.

private $host='localhost';//generalmente suele ser "127.0.0.1"
private $user='root';//Usuario de tu base de datos
private $pass='';//Contraseña del usuario de la base de datos
private $db='tuto_orders';//Nombre de la base de datos

private $host='localhost';//generalmente suele ser "127.0.0.1"

private $user='root';//Usuario de tu base de datos

private $pass='';//Contraseña del usuario de la base de datos

private $db='tuto_orders';//Nombre de la base de datos

2 ) – orders.php

<?php
/**
 	--------------------------
	Autor: Obed Alvarado
	Web: obedalvarado.pw
	Mail: info@obedalvarado.pw
	----------------------------
 
*/
include("database.php");
class orders extends database {
	public $mysqli;
	public $counter;//Propiedad para almacenar el numero de registro devueltos por la consulta

	function __construct(){
		$this->mysqli = $this->conectar();
    }
	
	public function countAll($sql){
		$query=$this->mysqli->query($sql);
		$count=$query->num_rows;
		return $count;
	}
	
	public function getData($tables,$campos,$search){
		$offset=$search['offset'];
		$per_page=$search['per_page'];
		$sWhere=" orders.name LIKE '%".$search['query']."%'";
		if ($search['location']!=""){
			$sWhere.=" and orders.location = '".$search['location']."'";
		}
		if ($search['status']!=""){
			$sWhere.=" and orders.status = '".$search['status']."'";
		}
		$sWhere.=" order by orders.id desc";
		$sql="SELECT $campos FROM  $tables where $sWhere LIMIT $offset,$per_page";
		
		$query=$this->mysqli->query($sql);
		$sql1="SELECT $campos FROM  $tables where $sWhere";
		$nums_row=$this->countAll($sql1);
		//Set counter
		$this->setCounter($nums_row);
		return $query;
	}
	function setCounter($counter) {
		$this->counter = $counter;
	}
	function getCounter() {
		return $this->counter;
	}
}

<?php

/**

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

Autor: Obed Alvarado

Web: obedalvarado.pw

Mail: info@obedalvarado.pw

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

include("database.php");

class orders extends database {

public $mysqli;

public $counter;//Propiedad para almacenar el numero de registro devueltos por la consulta

function __construct(){

$this->mysqli = $this->conectar();

}

public function countAll($sql){

$query=$this->mysqli->query($sql);

$count=$query->num_rows;

return $count;

}

public function getData($tables,$campos,$search){

$offset=$search['offset'];

$per_page=$search['per_page'];

$sWhere=" orders.name LIKE '%".$search['query']."%'";

if ($search['location']!=""){

$sWhere.=" and orders.location = '".$search['location']."'";

}

if ($search['status']!=""){

$sWhere.=" and orders.status = '".$search['status']."'";

}

$sWhere.=" order by orders.id desc";

$sql="SELECT $campos FROM $tables where $sWhere LIMIT $offset,$per_page";

$query=$this->mysqli->query($sql);

$sql1="SELECT $campos FROM $tables where $sWhere";

$nums_row=$this->countAll($sql1);

//Set counter

$this->setCounter($nums_row);

return $query;

}

function setCounter($counter) {

$this->counter = $counter;

}

function getCounter() {

return $this->counter;

}

La clase orders se encarga de hacer la consulta a la base de datos y aplicar los filtros necesario para poder mostrar los datos ya paginados.

3 ) – pagination.php

<?php
class Pagination{
	public $page;
    public $tpages;
    public $adjacents;

    function __construct($page, $tpages, $adjacents){
		$this->page = $page;
		$this->tpages  = $tpages;
		$this->adjacents   = $adjacents;
    }
	
	
	public	function paginate() {
		
		$page=$this->page;
		$tpages=$this->tpages;
		$adjacents=$this->adjacents ;
		
		$prevlabel = "&lsaquo; Anterior";
		$nextlabel = "Siguiente &rsaquo;";
		$out = '<ul class="pagination   pull-right">';
		// previous label
		 
		if($page==1) {
		$out.= "<li class='page-item disabled'><a class='page-link'>$prevlabel</a></li>";
		} else if($page==2) {
		$out.= "<li class='page-item'><a class='page-link' href='javascript:void(0);' onclick='load(1)'>$prevlabel</a></li>";
		}else {
		$out.= "<li class='page-item'><a class='page-link' href='javascript:void(0);' onclick='load(".($page-1).")'>$prevlabel</a></li>";
		 
		}
		// first label
		if($page>($adjacents+1)) {
		$out.= "<li class='page-item'><a class='page-link' href='javascript:void(0);' onclick='load(1)'>1</a></li>";
		}
		// interval
		if($page>($adjacents+2)) {
		$out.= "<li class='page-item'><a class='page-link'>...</a></li>";
		}
		 
		// pages
		 
		$pmin = ($page>$adjacents) ? ($page-$adjacents) : 1;
		$pmax = ($page<($tpages-$adjacents)) ? ($page+$adjacents) : $tpages;
		for($i=$pmin; $i<=$pmax; $i++) {
		if($i==$page) {
		$out.= "<li class='active page-item'><a class='page-link'>$i</a></li>";
		}else if($i==1) {
		$out.= "<li class='page-item'><a class='page-link' href='javascript:void(0);' onclick='load(1)'>$i</a></li>";
		}else {
		$out.= "<li class='page-item'><a class='page-link' href='javascript:void(0);' onclick='load(".$i.")'>$i</a></li>";
		}
		}
		 
		// interval
		 
		if($page<($tpages-$adjacents-1)) {
		$out.= "<li class='page-item'><a class='page-link'>...</a></li>";
		}
		 
		// last
		 
		if($page<($tpages-$adjacents)) {
		$out.= "<li class='page-item'><a class='page-link' href='javascript:void(0);' onclick='load($tpages)'>$tpages</a></li>";
		}
		 
		// next
		 
		if($page<$tpages) {
		$out.= "<li class='page-item'><a class='page-link' href='javascript:void(0);' onclick='load(".($page+1).")'>$nextlabel</a></li>";
		}else {
		$out.= "<li class='disabled page-item'><a class='page-link'>$nextlabel</a></li>";
		}
		$out.= "</ul>";
		return $out;
		}
}

?>

<?php

class Pagination{

public $page;

public $tpages;

public $adjacents;

function __construct($page, $tpages, $adjacents){

$this->page = $page;

$this->tpages = $tpages;

$this->adjacents = $adjacents;

}

public function paginate() {

$page=$this->page;

$tpages=$this->tpages;

$adjacents=$this->adjacents ;

$prevlabel = "&lsaquo; Anterior";

$nextlabel = "Siguiente &rsaquo;";

$out = '<ul class="pagination pull-right">';

// previous label

if($page==1) {

$out.= "<li class='page-item disabled'><a class='page-link'>$prevlabel</a></li>";

} else if($page==2) {

$out.= "<li class='page-item'><a class='page-link' href='javascript:void(0);' onclick='load(1)'>$prevlabel</a></li>";

}else {

$out.= "<li class='page-item'><a class='page-link' href='javascript:void(0);' onclick='load(".($page-1).")'>$prevlabel</a></li>";

}

// first label

if($page>($adjacents+1)) {

$out.= "<li class='page-item'><a class='page-link' href='javascript:void(0);' onclick='load(1)'>1</a></li>";

}

// interval

if($page>($adjacents+2)) {

$out.= "<li class='page-item'><a class='page-link'>...</a></li>";

}

// pages

$pmin = ($page>$adjacents) ? ($page-$adjacents) : 1;

$pmax = ($page<($tpages-$adjacents)) ? ($page+$adjacents) : $tpages;

for($i=$pmin; $i<=$pmax; $i++) {

if($i==$page) {

$out.= "<li class='active page-item'><a class='page-link'>$i</a></li>";

}else if($i==1) {

$out.= "<li class='page-item'><a class='page-link' href='javascript:void(0);' onclick='load(1)'>$i</a></li>";

}else {

$out.= "<li class='page-item'><a class='page-link' href='javascript:void(0);' onclick='load(".$i.")'>$i</a></li>";

}

// interval

if($page<($tpages-$adjacents-1)) {

$out.= "<li class='page-item'><a class='page-link'>...</a></li>";

}

// last

if($page<($tpages-$adjacents)) {

$out.= "<li class='page-item'><a class='page-link' href='javascript:void(0);' onclick='load($tpages)'>$tpages</a></li>";

}

// next

if($page<$tpages) {

$out.= "<li class='page-item'><a class='page-link' href='javascript:void(0);' onclick='load(".($page+1).")'>$nextlabel</a></li>";

}else {

$out.= "<li class='disabled page-item'><a class='page-link'>$nextlabel</a></li>";

}

$out.= "</ul>";

return $out;

}

Está clase se encarga de mostrar la paginación de los resultados devueltos por la consulta a la base de datos. Ahora que hemos realizado y paginado la consulta a la base de datos, así es como se mostrarán los datos en el navegador:

Anuncio: Comprar sistema de gestión y control de inventario

Sistema de Control de Inventario

Finalmente hemos terminado con la nuestro archivo para filtrar datos usando PHP, MySQL y Bootstrap, puedes probar el código completo, descargando todos los archivos fuente, en el enlace a continuación. También te invito a que me sigas en facebook para tener acceso a tutoriales como este 😀

DEMOSTRACIÓN DESCARGAR ARCHIVOS

Blog

Tabla de pedidos con filtro de búsqueda desarrollada con PHP, MySQL y Bootstrap

Tecnologías utilizadas:

Tabla de pedidos con filtro de búsqueda desarrollada con PHP, MySQL y Bootstrap

Crear la base de datos MySQL y tabla requerida:

Estructura básica del index.html:

style.css

script.js

Creando archivo ajax.php:

ajax.php

Conexión de nuestra con la base de datos

1 ) – database.php

2 ) – orders.php

3 ) – pagination.php

También te puede interesar:

Cómo Importar una Base de Datos Grande en Windows con MySQL

Cómo trabajar con fechas y horas en PHP

Crea una calculadora de interés compuesto mensual con PHP

Suscríbete a nuestro boletín de noticias

Sobre Mi

Productos

Enlaces importantes