Jquery Mysql PHP

Cargar información dinámica en ventana modal Bootstrap con PHP, MySQL y jQuery

Obed Alvarado 28 min de lectura
Compartir

[caption id="attachment_711" align="aligncenter" width="1360"]Ventana Modal Bootstrap Ventana Modal Bootstrap[/caption]

En  esta ocasión quiero compartir unos scripts php  que nos servirán como guía a la hora que necesitemos enviar datos cargados dinámicamente  a una ventana modal Bootstrap; para este ejemplo haremos un CRUD, pero prestaremos atención especial a como enviar los datos dinámicos a la ventana modal.

Antes de empezar a echaremos un vistazo a la estructura de carpetas y archivos.

modal_dinamico

Cabe mencionar que para hacer este tutorial me he basado en el siguiente post:

Paginación con PHP, MySQL, jQuery, Ajax y Bootstrap

En donde se recupera un listado de registros de una base de datos MySQL y se pagina usando jQuery Ajax, siempre utilizando bootstrap para el diseño.

Bien ahora procedamos con la explicación código de cada uno de los archivos mostrados en la imagen anterior.

countries.sql

Este archivo contiene las instrucciones sql para la creación de una tabla llamada countries. Para poder visualizar correctamente los datos que son mostrados en este tutorial , es necesario crear una base de datos , luego importar el archivo countries.sql a  nuestra base de datos que hemos creado.

-- phpMyAdmin SQL Dump
-- version 4.2.11
-- http://www.phpmyadmin.net
--
-- Servidor: 127.0.0.1
-- Tiempo de generación: 12-06-2015 a las 19:06:10
-- Versión del servidor: 5.6.21
-- Versión de PHP: 5.6.3


SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
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 utf8 */;


--
-- Base de datos: `test`
--


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


--
-- Estructura de tabla para la tabla `countries`
--


CREATE TABLE IF NOT EXISTS `countries` (
`id` int(5) NOT NULL,
  `countryCode` char(2) NOT NULL DEFAULT '',
  `countryName` varchar(45) NOT NULL DEFAULT '',
  `currencyCode` char(3) DEFAULT NULL,
  `capital` varchar(30) DEFAULT NULL,
  `continentName` varchar(15) DEFAULT NULL
) ENGINE=MyISAM AUTO_INCREMENT=251 DEFAULT CHARSET=utf8;


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


INSERT INTO `countries` (`id`, `countryCode`, `countryName`, `currencyCode`, `capital`, `continentName`) VALUES
(1, 'AD', 'Andorra', 'EUR', 'Andorra la Vella', 'Europe'),
(2, 'AE', 'United Arab Emirates', 'AED', 'Abu Dhabi', 'Asia'),
(3, 'AF', 'Afghanistan', 'AFN', 'Kabul', 'Asia'),
(4, 'AG', 'Antigua and Barbuda', 'XCD', 'St. John''s', 'North America'),
(5, 'AI', 'Anguilla', 'XCD', 'The Valley', 'North America'),
(6, 'AL', 'Albania', 'ALL', 'Tirana', 'Europe'),
(7, 'AM', 'Armenia', 'AMD', 'Yerevan', 'Asia'),
(8, 'AO', 'Angola', 'AOA', 'Luanda', 'Africa'),
(9, 'AQ', 'Antarctica', '', '', 'Antarctica'),
(10, 'AR', 'Argentina', 'ARS', 'Buenos Aires', 'South America'),
(11, 'AS', 'American Samoa', 'USD', 'Pago Pago', 'Oceania'),
(12, 'AT', 'Austria', 'EUR', 'Vienna', 'Europe'),
(13, 'AU', 'Australia', 'AUD', 'Canberra', 'Oceania'),
(14, 'AW', 'Aruba', 'AWG', 'Oranjestad', 'North America'),
(15, 'AX', 'Åland', 'EUR', 'Mariehamn', 'Europe'),
(16, 'AZ', 'Azerbaijan', 'AZN', 'Baku', 'Asia'),
(17, 'BA', 'Bosnia and Herzegovina', 'BAM', 'Sarajevo', 'Europe'),
(18, 'BB', 'Barbados', 'BBD', 'Bridgetown', 'North America'),
(19, 'BD', 'Bangladesh', 'BDT', 'Dhaka', 'Asia'),
(20, 'BE', 'Belgium', 'EUR', 'Brussels', 'Europe'),
(21, 'BF', 'Burkina Faso', 'XOF', 'Ouagadougou', 'Africa'),
(22, 'BG', 'Bulgaria', 'BGN', 'Sofia', 'Europe'),
(23, 'BH', 'Bahrain', 'BHD', 'Manama', 'Asia'),
(24, 'BI', 'Burundi', 'BIF', 'Bujumbura', 'Africa'),
(25, 'BJ', 'Benin', 'XOF', 'Porto-Novo', 'Africa'),
(26, 'BL', 'Saint Barthélemy', 'EUR', 'Gustavia', 'North America'),
(27, 'BM', 'Bermuda', 'BMD', 'Hamilton', 'North America'),
(28, 'BN', 'Brunei', 'BND', 'Bandar Seri Begawan', 'Asia'),
(29, 'BO', 'Bolivia', 'BOB', 'Sucre', 'South America'),
(30, 'BQ', 'Bonaire', 'USD', '', 'North America'),
(31, 'BR', 'Brazil', 'BRL', 'Brasília', 'South America'),
(32, 'BS', 'Bahamas', 'BSD', 'Nassau', 'North America'),
(33, 'BT', 'Bhutan', 'BTN', 'Thimphu', 'Asia'),
(34, 'BV', 'Bouvet Island', 'NOK', '', 'Antarctica'),
(35, 'BW', 'Botswana', 'BWP', 'Gaborone', 'Africa'),
(36, 'BY', 'Belarus', 'BYR', 'Minsk', 'Europe'),
(37, 'BZ', 'Belize', 'BZD', 'Belmopan', 'North America'),
(38, 'CA', 'Canada', 'CAD', 'Ottawa', 'North America'),
(39, 'CC', 'Cocos [Keeling] Islands', 'AUD', 'West Island', 'Asia'),
(40, 'CD', 'Democratic Republic of the Congo', 'CDF', 'Kinshasa', 'Africa'),
(41, 'CF', 'Central African Republic', 'XAF', 'Bangui', 'Africa'),
(42, 'CG', 'Republic of the Congo', 'XAF', 'Brazzaville', 'Africa'),
(43, 'CH', 'Switzerland', 'CHF', 'Berne', 'Europe'),
(44, 'CI', 'Ivory Coast', 'XOF', 'Yamoussoukro', 'Africa'),
(45, 'CK', 'Cook Islands', 'NZD', 'Avarua', 'Oceania'),
(46, 'CL', 'Chile', 'CLP', 'Santiago', 'South America'),
(47, 'CM', 'Cameroon', 'XAF', 'Yaoundé', 'Africa'),
(48, 'CN', 'China', 'CNY', 'Beijing', 'Asia'),
(49, 'CO', 'Colombia', 'COP', 'Bogotá', 'South America'),
(50, 'CR', 'Costa Rica', 'CRC', 'San José', 'North America'),
(51, 'CU', 'Cuba', 'CUP', 'Havana', 'North America'),
(52, 'CV', 'Cape Verde', 'CVE', 'Praia', 'Africa'),
(53, 'CW', 'Curacao', 'ANG', 'Willemstad', 'North America'),
(54, 'CX', 'Christmas Island', 'AUD', 'The Settlement', 'Asia'),
(55, 'CY', 'Cyprus', 'EUR', 'Nicosia', 'Europe'),
(56, 'CZ', 'Czech Republic', 'CZK', 'Prague', 'Europe'),
(57, 'DE', 'Germany', 'EUR', 'Berlin', 'Europe'),
(58, 'DJ', 'Djibouti', 'DJF', 'Djibouti', 'Africa'),
(59, 'DK', 'Denmark', 'DKK', 'Copenhagen', 'Europe'),
(60, 'DM', 'Dominica', 'XCD', 'Roseau', 'North America'),
(61, 'DO', 'Dominican Republic', 'DOP', 'Santo Domingo', 'North America'),
(62, 'DZ', 'Algeria', 'DZD', 'Algiers', 'Africa'),
(63, 'EC', 'Ecuador', 'USD', 'Quito', 'South America'),
(64, 'EE', 'Estonia', 'EUR', 'Tallinn', 'Europe'),
(65, 'EG', 'Egypt', 'EGP', 'Cairo', 'Africa'),
(66, 'EH', 'Western Sahara', 'MAD', 'El Aaiún', 'Africa'),
(67, 'ER', 'Eritrea', 'ERN', 'Asmara', 'Africa'),
(68, 'ES', 'Spain', 'EUR', 'Madrid', 'Europe'),
(69, 'ET', 'Ethiopia', 'ETB', 'Addis Ababa', 'Africa'),
(70, 'FI', 'Finland', 'EUR', 'Helsinki', 'Europe'),
(71, 'FJ', 'Fiji', 'FJD', 'Suva', 'Oceania'),
(72, 'FK', 'Falkland Islands', 'FKP', 'Stanley', 'South America'),
(73, 'FM', 'Micronesia', 'USD', 'Palikir', 'Oceania'),
(74, 'FO', 'Faroe Islands', 'DKK', 'Tórshavn', 'Europe'),
(75, 'FR', 'France', 'EUR', 'Paris', 'Europe'),
(76, 'GA', 'Gabon', 'XAF', 'Libreville', 'Africa'),
(77, 'GB', 'United Kingdom', 'GBP', 'London', 'Europe'),
(78, 'GD', 'Grenada', 'XCD', 'St. George''s', 'North America'),
(79, 'GE', 'Georgia', 'GEL', 'Tbilisi', 'Asia'),
(80, 'GF', 'French Guiana', 'EUR', 'Cayenne', 'South America'),
(81, 'GG', 'Guernsey', 'GBP', 'St Peter Port', 'Europe'),
(82, 'GH', 'Ghana', 'GHS', 'Accra', 'Africa'),
(83, 'GI', 'Gibraltar', 'GIP', 'Gibraltar', 'Europe'),
(84, 'GL', 'Greenland', 'DKK', 'Nuuk', 'North America'),
(85, 'GM', 'Gambia', 'GMD', 'Banjul', 'Africa'),
(86, 'GN', 'Guinea', 'GNF', 'Conakry', 'Africa'),
(87, 'GP', 'Guadeloupe', 'EUR', 'Basse-Terre', 'North America'),
(88, 'GQ', 'Equatorial Guinea', 'XAF', 'Malabo', 'Africa'),
(89, 'GR', 'Greece', 'EUR', 'Athens', 'Europe'),
(90, 'GS', 'South Georgia and the South Sandwich Islands', 'GBP', 'Grytviken', 'Antarctica'),
(91, 'GT', 'Guatemala', 'GTQ', 'Guatemala City', 'North America'),
(92, 'GU', 'Guam', 'USD', 'Hagåtña', 'Oceania'),
(93, 'GW', 'Guinea-Bissau', 'XOF', 'Bissau', 'Africa'),
(94, 'GY', 'Guyana', 'GYD', 'Georgetown', 'South America'),
(95, 'HK', 'Hong Kong', 'HKD', 'Hong Kong', 'Asia'),
(96, 'HM', 'Heard Island and McDonald Islands', 'AUD', '', 'Antarctica'),
(97, 'HN', 'Honduras', 'HNL', 'Tegucigalpa', 'North America'),
(98, 'HR', 'Croatia', 'HRK', 'Zagreb', 'Europe'),
(99, 'HT', 'Haiti', 'HTG', 'Port-au-Prince', 'North America'),
(100, 'HU', 'Hungary', 'HUF', 'Budapest', 'Europe'),
(101, 'ID', 'Indonesia', 'IDR', 'Jakarta', 'Asia'),
(102, 'IE', 'Ireland', 'EUR', 'Dublin', 'Europe'),
(103, 'IL', 'Israel', 'ILS', '', 'Asia'),
(104, 'IM', 'Isle of Man', 'GBP', 'Douglas', 'Europe'),
(105, 'IN', 'India', 'INR', 'New Delhi', 'Asia'),
(106, 'IO', 'British Indian Ocean Territory', 'USD', '', 'Asia'),
(107, 'IQ', 'Iraq', 'IQD', 'Baghdad', 'Asia'),
(108, 'IR', 'Iran', 'IRR', 'Tehran', 'Asia'),
(109, 'IS', 'Iceland', 'ISK', 'Reykjavik', 'Europe'),
(110, 'IT', 'Italy', 'EUR', 'Rome', 'Europe'),
(111, 'JE', 'Jersey', 'GBP', 'Saint Helier', 'Europe'),
(112, 'JM', 'Jamaica', 'JMD', 'Kingston', 'North America'),
(113, 'JO', 'Jordan', 'JOD', 'Amman', 'Asia'),
(114, 'JP', 'Japan', 'JPY', 'Tokyo', 'Asia'),
(115, 'KE', 'Kenya', 'KES', 'Nairobi', 'Africa'),
(116, 'KG', 'Kyrgyzstan', 'KGS', 'Bishkek', 'Asia'),
(117, 'KH', 'Cambodia', 'KHR', 'Phnom Penh', 'Asia'),
(118, 'KI', 'Kiribati', 'AUD', 'Tarawa', 'Oceania'),
(119, 'KM', 'Comoros', 'KMF', 'Moroni', 'Africa'),
(120, 'KN', 'Saint Kitts and Nevis', 'XCD', 'Basseterre', 'North America'),
(121, 'KP', 'North Korea', 'KPW', 'Pyongyang', 'Asia'),
(122, 'KR', 'South Korea', 'KRW', 'Seoul', 'Asia'),
(123, 'KW', 'Kuwait', 'KWD', 'Kuwait City', 'Asia'),
(124, 'KY', 'Cayman Islands', 'KYD', 'George Town', 'North America'),
(125, 'KZ', 'Kazakhstan', 'KZT', 'Astana', 'Asia'),
(126, 'LA', 'Laos', 'LAK', 'Vientiane', 'Asia'),
(127, 'LB', 'Lebanon', 'LBP', 'Beirut', 'Asia'),
(128, 'LC', 'Saint Lucia', 'XCD', 'Castries', 'North America'),
(129, 'LI', 'Liechtenstein', 'CHF', 'Vaduz', 'Europe'),
(130, 'LK', 'Sri Lanka', 'LKR', 'Colombo', 'Asia'),
(131, 'LR', 'Liberia', 'LRD', 'Monrovia', 'Africa'),
(132, 'LS', 'Lesotho', 'LSL', 'Maseru', 'Africa'),
(133, 'LT', 'Lithuania', 'LTL', 'Vilnius', 'Europe'),
(134, 'LU', 'Luxembourg', 'EUR', 'Luxembourg', 'Europe'),
(135, 'LV', 'Latvia', 'EUR', 'Riga', 'Europe'),
(136, 'LY', 'Libya', 'LYD', 'Tripoli', 'Africa'),
(137, 'MA', 'Morocco', 'MAD', 'Rabat', 'Africa'),
(138, 'MC', 'Monaco', 'EUR', 'Monaco', 'Europe'),
(139, 'MD', 'Moldova', 'MDL', 'Chişinău', 'Europe'),
(140, 'ME', 'Montenegro', 'EUR', 'Podgorica', 'Europe'),
(141, 'MF', 'Saint Martin', 'EUR', 'Marigot', 'North America'),
(142, 'MG', 'Madagascar', 'MGA', 'Antananarivo', 'Africa'),
(143, 'MH', 'Marshall Islands', 'USD', 'Majuro', 'Oceania'),
(144, 'MK', 'Macedonia', 'MKD', 'Skopje', 'Europe'),
(145, 'ML', 'Mali', 'XOF', 'Bamako', 'Africa'),
(146, 'MM', 'Myanmar [Burma]', 'MMK', 'Nay Pyi Taw', 'Asia'),
(147, 'MN', 'Mongolia', 'MNT', 'Ulan Bator', 'Asia'),
(148, 'MO', 'Macao', 'MOP', 'Macao', 'Asia'),
(149, 'MP', 'Northern Mariana Islands', 'USD', 'Saipan', 'Oceania'),
(150, 'MQ', 'Martinique', 'EUR', 'Fort-de-France', 'North America'),
(151, 'MR', 'Mauritania', 'MRO', 'Nouakchott', 'Africa'),
(152, 'MS', 'Montserrat', 'XCD', 'Plymouth', 'North America'),
(153, 'MT', 'Malta', 'EUR', 'Valletta', 'Europe'),
(154, 'MU', 'Mauritius', 'MUR', 'Port Louis', 'Africa'),
(155, 'MV', 'Maldives', 'MVR', 'Malé', 'Asia'),
(156, 'MW', 'Malawi', 'MWK', 'Lilongwe', 'Africa'),
(157, 'MX', 'Mexico', 'MXN', 'Mexico City', 'North America'),
(158, 'MY', 'Malaysia', 'MYR', 'Kuala Lumpur', 'Asia'),
(159, 'MZ', 'Mozambique', 'MZN', 'Maputo', 'Africa'),
(160, 'NA', 'Namibia', 'NAD', 'Windhoek', 'Africa'),
(161, 'NC', 'New Caledonia', 'XPF', 'Noumea', 'Oceania'),
(162, 'NE', 'Niger', 'XOF', 'Niamey', 'Africa'),
(163, 'NF', 'Norfolk Island', 'AUD', 'Kingston', 'Oceania'),
(164, 'NG', 'Nigeria', 'NGN', 'Abuja', 'Africa'),
(165, 'NI', 'Nicaragua', 'NIO', 'Managua', 'North America'),
(166, 'NL', 'Netherlands', 'EUR', 'Amsterdam', 'Europe'),
(167, 'NO', 'Norway', 'NOK', 'Oslo', 'Europe'),
(168, 'NP', 'Nepal', 'NPR', 'Kathmandu', 'Asia'),
(169, 'NR', 'Nauru', 'AUD', '', 'Oceania'),
(170, 'NU', 'Niue', 'NZD', 'Alofi', 'Oceania'),
(171, 'NZ', 'New Zealand', 'NZD', 'Wellington', 'Oceania'),
(172, 'OM', 'Oman', 'OMR', 'Muscat', 'Asia'),
(173, 'PA', 'Panama', 'PAB', 'Panama City', 'North America'),
(174, 'PE', 'Peru', 'PEN', 'Lima', 'South America'),
(175, 'PF', 'French Polynesia', 'XPF', 'Papeete', 'Oceania'),
(176, 'PG', 'Papua New Guinea', 'PGK', 'Port Moresby', 'Oceania'),
(177, 'PH', 'Philippines', 'PHP', 'Manila', 'Asia'),
(178, 'PK', 'Pakistan', 'PKR', 'Islamabad', 'Asia'),
(179, 'PL', 'Poland', 'PLN', 'Warsaw', 'Europe'),
(180, 'PM', 'Saint Pierre and Miquelon', 'EUR', 'Saint-Pierre', 'North America'),
(181, 'PN', 'Pitcairn Islands', 'NZD', 'Adamstown', 'Oceania'),
(182, 'PR', 'Puerto Rico', 'USD', 'San Juan', 'North America'),
(183, 'PS', 'Palestine', 'ILS', '', 'Asia'),
(184, 'PT', 'Portugal', 'EUR', 'Lisbon', 'Europe'),
(185, 'PW', 'Palau', 'USD', 'Melekeok - Palau State Capital', 'Oceania'),
(186, 'PY', 'Paraguay', 'PYG', 'Asunción', 'South America'),
(187, 'QA', 'Qatar', 'QAR', 'Doha', 'Asia'),
(188, 'RE', 'Réunion', 'EUR', 'Saint-Denis', 'Africa'),
(189, 'RO', 'Romania', 'RON', 'Bucharest', 'Europe'),
(190, 'RS', 'Serbia', 'RSD', 'Belgrade', 'Europe'),
(191, 'RU', 'Russia', 'RUB', 'Moscow', 'Europe'),
(192, 'RW', 'Rwanda', 'RWF', 'Kigali', 'Africa'),
(193, 'SA', 'Saudi Arabia', 'SAR', 'Riyadh', 'Asia'),
(194, 'SB', 'Solomon Islands', 'SBD', 'Honiara', 'Oceania'),
(195, 'SC', 'Seychelles', 'SCR', 'Victoria', 'Africa'),
(196, 'SD', 'Sudan', 'SDG', 'Khartoum', 'Africa'),
(197, 'SE', 'Sweden', 'SEK', 'Stockholm', 'Europe'),
(198, 'SG', 'Singapore', 'SGD', 'Singapore', 'Asia'),
(199, 'SH', 'Saint Helena', 'SHP', 'Jamestown', 'Africa'),
(200, 'SI', 'Slovenia', 'EUR', 'Ljubljana', 'Europe'),
(201, 'SJ', 'Svalbard and Jan Mayen', 'NOK', 'Longyearbyen', 'Europe'),
(202, 'SK', 'Slovakia', 'EUR', 'Bratislava', 'Europe'),
(203, 'SL', 'Sierra Leone', 'SLL', 'Freetown', 'Africa'),
(204, 'SM', 'San Marino', 'EUR', 'San Marino', 'Europe'),
(205, 'SN', 'Senegal', 'XOF', 'Dakar', 'Africa'),
(206, 'SO', 'Somalia', 'SOS', 'Mogadishu', 'Africa'),
(207, 'SR', 'Suriname', 'SRD', 'Paramaribo', 'South America'),
(208, 'SS', 'South Sudan', 'SSP', 'Juba', 'Africa'),
(209, 'ST', 'São Tomé and Príncipe', 'STD', 'São Tomé', 'Africa'),
(210, 'SV', 'El Salvador', 'USD', 'San Salvador', 'North America'),
(211, 'SX', 'Sint Maarten', 'ANG', 'Philipsburg', 'North America'),
(212, 'SY', 'Syria', 'SYP', 'Damascus', 'Asia'),
(213, 'SZ', 'Swaziland', 'SZL', 'Mbabane', 'Africa'),
(214, 'TC', 'Turks and Caicos Islands', 'USD', 'Cockburn Town', 'North America'),
(215, 'TD', 'Chad', 'XAF', 'N''Djamena', 'Africa'),
(216, 'TF', 'French Southern Territories', 'EUR', 'Port-aux-Français', 'Antarctica'),
(217, 'TG', 'Togo', 'XOF', 'Lomé', 'Africa'),
(218, 'TH', 'Thailand', 'THB', 'Bangkok', 'Asia'),
(219, 'TJ', 'Tajikistan', 'TJS', 'Dushanbe', 'Asia'),
(220, 'TK', 'Tokelau', 'NZD', '', 'Oceania'),
(221, 'TL', 'East Timor', 'USD', 'Dili', 'Oceania'),
(222, 'TM', 'Turkmenistan', 'TMT', 'Ashgabat', 'Asia'),
(223, 'TN', 'Tunisia', 'TND', 'Tunis', 'Africa'),
(224, 'TO', 'Tonga', 'TOP', 'Nuku''alofa', 'Oceania'),
(225, 'TR', 'Turkey', 'TRY', 'Ankara', 'Asia'),
(226, 'TT', 'Trinidad and Tobago', 'TTD', 'Port of Spain', 'North America'),
(227, 'TV', 'Tuvalu', 'AUD', 'Funafuti', 'Oceania'),
(228, 'TW', 'Taiwan', 'TWD', 'Taipei', 'Asia'),
(229, 'TZ', 'Tanzania', 'TZS', 'Dodoma', 'Africa'),
(230, 'UA', 'Ukraine', 'UAH', 'Kyiv', 'Europe'),
(231, 'UG', 'Uganda', 'UGX', 'Kampala', 'Africa'),
(232, 'UM', 'U.S. Minor Outlying Islands', 'USD', '', 'Oceania'),
(233, 'US', 'United States', 'USD', 'Washington', 'North America'),
(234, 'UY', 'Uruguay', 'UYU', 'Montevideo', 'South America'),
(235, 'UZ', 'Uzbekistan', 'UZS', 'Tashkent', 'Asia'),
(236, 'VA', 'Vatican City', 'EUR', 'Vatican', 'Europe'),
(237, 'VC', 'Saint Vincent and the Grenadines', 'XCD', 'Kingstown', 'North America'),
(238, 'VE', 'Venezuela', 'VEF', 'Caracas', 'South America'),
(239, 'VG', 'British Virgin Islands', 'USD', 'Road Town', 'North America'),
(240, 'VI', 'U.S. Virgin Islands', 'USD', 'Charlotte Amalie', 'North America'),
(241, 'VN', 'Vietnam', 'VND', 'Hanoi', 'Asia'),
(242, 'VU', 'Vanuatu', 'VUV', 'Port Vila', 'Oceania'),
(243, 'WF', 'Wallis and Futuna', 'XPF', 'Mata-Utu', 'Oceania'),
(244, 'WS', 'Samoa', 'WST', 'Apia', 'Oceania'),
(245, 'XK', 'Kosovo', 'EUR', 'Pristina', 'Europe'),
(246, 'YE', 'Yemen', 'YER', 'Sanaa', 'Asia'),
(247, 'YT', 'Mayotte', 'EUR', 'Mamoutzou', 'Africa'),
(248, 'ZA', 'South Africa', 'ZAR', 'Pretoria', 'Africa'),
(249, 'ZM', 'Zambia', 'ZMW', 'Lusaka', 'Africa'),
(250, 'ZW', 'Zimbabwe', 'ZWL', 'Harare', 'Africa');


--
-- Índices para tablas volcadas
--


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


--
-- AUTO_INCREMENT de las tablas volcadas
--


--
-- AUTO_INCREMENT de la tabla `countries`
--
ALTER TABLE `countries`
MODIFY `id` int(5) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=251;
/*!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 */;

index.php

Este archivo contiene la estructura html para gestionar nuestro proyecto

<!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>Paginación con PHP, Mysql, jQuery, Ajax y Bootstrap </title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  </head>
  <body>
  <?php include("modal_agregar.php");?>
  <?php include("modal_modificar.php");?>
  <?php include("modal_eliminar.php");?>
    <div class="container-fluid">


		<div class='col-xs-6'>	
			<h3> Listado de Países</h3>
		</div>
		<div class='col-xs-6'>
			<h3 class='text-right'>		
				<button type="button" class="btn btn-default" data-toggle="modal" data-target="#dataRegister"><i class='glyphicon glyphicon-plus'></i> Agregar</button>
			</h3>
		</div>	


	  <div class="row">


		<div class="col-xs-12">
		<div id="loader" class="text-center"> <img src="loader.gif"></div>
		<div class="datos_ajax_delete"></div><!-- Datos ajax Final -->
		<div class="outer_div"></div><!-- Datos ajax Final -->
		</div>
	  </div>
	</div>
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	<script src="js/app.js"></script>
	<script>
		$(document).ready(function(){
			load(1);
		});
	</script>
 </body>
</html>

modal_agregar.php

Archivo contiene el formulario html del modal para agregar registros a la base de datos

<form id="guardarDatos">
<div class="modal fade" id="dataRegister" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Agregar país</h4>
      </div>
      <div class="modal-body">
			<div id="datos_ajax_register"></div>
          <div class="form-group">
            <label for="codigo0" class="control-label">Código:</label>
            <input type="text" class="form-control" id="codigo0" name="codigo" required maxlength="2">
		  </div>
		  <div class="form-group">
            <label for="nombre0" class="control-label">Nombre:</label>
            <input type="text" class="form-control" id="nombre0" name="nombre" required maxlength="45">
          </div>
		  <div class="form-group">
            <label for="moneda0" class="control-label">Moneda:</label>
            <input type="text" class="form-control" id="moneda0" name="moneda" required maxlength="3">
          </div>
		  <div class="form-group">
            <label for="capital0" class="control-label">Capital:</label>
            <input type="text" class="form-control" id="capital0" name="capital" required maxlength="30"> 
          </div>
		  <div class="form-group">
            <label for="continente0" class="control-label">Continente:</label>
            <input type="text" class="form-control" id="continente0" name="continente" required maxlength="15">
          </div>


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        <button type="submit" class="btn btn-primary">Guardar datos</button>
      </div>
    </div>
  </div>
</div>
</form>

modal_modificar.php

Este archivo contiene el formulario html que permite cargar la información de  forma dinámica dentro de la ventana modal Bootstrap.

<form id="actualidarDatos">
<div class="modal fade" id="dataUpdate" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Modificar país:</h4>
      </div>
      <div class="modal-body">
			<div id="datos_ajax"></div>
          <div class="form-group">
            <label for="codigo" class="control-label">Código:</label>
            <input type="text" class="form-control" id="codigo" name="codigo" required maxlength="2">
			<input type="hidden" class="form-control" id="id" name="id">
          </div>
		  <div class="form-group">
            <label for="nombre" class="control-label">Nombre:</label>
            <input type="text" class="form-control" id="nombre" name="nombre" required maxlength="45">
          </div>
		  <div class="form-group">
            <label for="moneda" class="control-label">Moneda:</label>
            <input type="text" class="form-control" id="moneda" name="moneda" required maxlength="3">
          </div>
		  <div class="form-group">
            <label for="capital" class="control-label">Capital:</label>
            <input type="text" class="form-control" id="capital" name="capital" required maxlength="30"> 
          </div>
		  <div class="form-group">
            <label for="continente" class="control-label">Continente:</label>
            <input type="text" class="form-control" id="continente" name="continente" required maxlength="15">
          </div>


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        <button type="submit" class="btn btn-primary">Actualizar datos</button>
      </div>
    </div>
  </div>
</div>
</form>

modal_eliminar.php

Contiene el formulario que se muestra al usuario a manera de confirmación al querer eliminar un registro de la base de datos.

<form id="eliminarDatos">
<div class="modal fade" id="dataDelete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <input type="hidden" id="id_pais" name="id_pais">
      <h2 class="text-center text-muted">Estas seguro?</h2>
	  <p class="lead text-muted text-center" style="display: block;margin:10px">Esta acción eliminará de forma permanente el registro. Deseas continuar?</p>
      <div class="modal-footer">
        <button type="button" class="btn btn-lg btn-default" data-dismiss="modal">Cancelar</button>
        <button type="submit" class="btn btn-lg btn-primary">Aceptar</button>
      </div>
    </div>
  </div>
</div>
</form>

js/ app.js

Este archivo se encarga de gestionar todas nuestras peticiones  mediante jQuery.

	function load(page){
		var parametros = {"action":"ajax","page":page};
		$("#loader").fadeIn('slow');
		$.ajax({
			url:'paises_ajax.php',
			data: parametros,
			 beforeSend: function(objeto){
			$("#loader").html("<img src='loader.gif'>");
			},
			success:function(data){
				$(".outer_div").html(data).fadeIn('slow');
				$("#loader").html("");
			}
		})
	}


		$('#dataUpdate').on('show.bs.modal', function (event) {
		  var button = $(event.relatedTarget) // Botón que activó el modal
		  var codigo = button.data('codigo') // Extraer la información de atributos de datos
		  var id = button.data('id') // Extraer la información de atributos de datos
		  var nombre = button.data('nombre') // Extraer la información de atributos de datos
		  var moneda = button.data('moneda') // Extraer la información de atributos de datos
		  var capital = button.data('capital') // Extraer la información de atributos de datos
		  var continente = button.data('continente') // Extraer la información de atributos de datos


		  var modal = $(this)
		  modal.find('.modal-title').text('Modificar país: '+nombre)
		  modal.find('.modal-body #id').val(id)
		  modal.find('.modal-body #codigo').val(codigo)
		  modal.find('.modal-body #nombre').val(nombre)
		  modal.find('.modal-body #moneda').val(moneda)
		  modal.find('.modal-body #capital').val(capital)
		  modal.find('.modal-body #continente').val(continente)
		  $('.alert').hide();//Oculto alert
		})


		$('#dataDelete').on('show.bs.modal', function (event) {
		  var button = $(event.relatedTarget) // Botón que activó el modal
		  var id = button.data('id') // Extraer la información de atributos de datos
		  var modal = $(this)
		  modal.find('#id_pais').val(id)
		})


	$( "#actualidarDatos" ).submit(function( event ) {
		var parametros = $(this).serialize();
			 $.ajax({
					type: "POST",
					url: "modificar.php",
					data: parametros,
					 beforeSend: function(objeto){
						$("#datos_ajax").html("Mensaje: Cargando...");
					  },
					success: function(datos){
					$("#datos_ajax").html(datos);


					load(1);
				  }
			});
		  event.preventDefault();
		});


		$( "#guardarDatos" ).submit(function( event ) {
		var parametros = $(this).serialize();
			 $.ajax({
					type: "POST",
					url: "agregar.php",
					data: parametros,
					 beforeSend: function(objeto){
						$("#datos_ajax_register").html("Mensaje: Cargando...");
					  },
					success: function(datos){
					$("#datos_ajax_register").html(datos);


					load(1);
				  }
			});
		  event.preventDefault();
		});


		$( "#eliminarDatos" ).submit(function( event ) {
		var parametros = $(this).serialize();
			 $.ajax({
					type: "POST",
					url: "eliminar.php",
					data: parametros,
					 beforeSend: function(objeto){
						$(".datos_ajax_delete").html("Mensaje: Cargando...");
					  },
					success: function(datos){
					$(".datos_ajax_delete").html(datos);


					$('#dataDelete').modal('hide');
					load(1);
				  }
			});
		  event.preventDefault();
		});

En el archivo anterior se encuentra un fragmento de código que desencadena un evento al pulsar sobre el modal; y mediante los atributos de datos se encarga de enviar los datos correspondientes a la ventana modal.  Dicha función fue realizada tomando como guía la documentación de bootstrap

paises_ajax.php

Este archivo se encarga de realizar una consulta a la base de datos MySQL, el cual  es llamado vía AJAX desde el  index.php mediante   la función load() , la cual vimos anteriormente. Es en este archivo donde se envían los datos cargados dinámicamente al modal de boostrap haciendo de los atributos de datos.

<?php
/*-----------------------
Autor: Obed Alvarado
http://www.obedalvarado.pw
Fecha: 12-06-2015
Version de PHP: 5.6.3
----------------------------*/


	# conectare la base de datos
    $con=@mysqli_connect('localhost', 'root', '', 'test_modal');
    if(!$con){
        die("imposible conectarse: ".mysqli_error($con));
    }
    if (@mysqli_connect_errno()) {
        die("Connect failed: ".mysqli_connect_errno()." : ". mysqli_connect_error());
    }
	$action = (isset($_REQUEST['action'])&& $_REQUEST['action'] !=NULL)?$_REQUEST['action']:'';
	if($action == 'ajax'){
		include 'pagination.php'; //incluir el archivo de paginación
		//las variables de paginación
		$page = (isset($_REQUEST['page']) && !empty($_REQUEST['page']))?$_REQUEST['page']:1;
		$per_page = 10; //la cantidad de registros que desea mostrar
		$adjacents  = 4; //brecha entre páginas después de varios adyacentes
		$offset = ($page - 1) * $per_page;
		//Cuenta el número total de filas de la tabla*/
		$count_query   = mysqli_query($con,"SELECT count(*) AS numrows FROM countries ");
		if ($row= mysqli_fetch_array($count_query)){$numrows = $row['numrows'];}
		$total_pages = ceil($numrows/$per_page);
		$reload = 'index.php';
		//consulta principal para recuperar los datos
		$query = mysqli_query($con,"SELECT * FROM countries  order by countryName LIMIT $offset,$per_page");


		if ($numrows>0){
			?>
		<table class="table table-bordered">
			  <thead>
				<tr>
				  <th>Código</th>
				  <th>Nombre</th>
				  <th>Moneda</th>
				  <th>Capital</th>
				  <th>Continente</th>
				  <th>Acciones</th>
				</tr>
			</thead>
			<tbody>
			<?php
			while($row = mysqli_fetch_array($query)){
				?>
				<tr>
					<td><?php echo $row['countryCode'];?></td>
					<td><?php echo $row['countryName'];?></td>
					<td><?php echo $row['currencyCode'];?></td>
					<td><?php echo $row['capital'];?></td>
					<td><?php echo $row['continentName'];?></td>
					<td>
						<button type="button" class="btn btn-info" data-toggle="modal" data-target="#dataUpdate" data-id="<?php echo $row['id']?>" data-codigo="<?php echo $row['countryCode']?>" data-nombre="<?php echo $row['countryName']?>" data-moneda="<?php echo $row['currencyCode']?>" data-capital="<?php echo $row['capital']?>" data-continente="<?php echo $row['continentName']?>"><i class='glyphicon glyphicon-edit'></i> Modificar</button>
						<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#dataDelete" data-id="<?php echo $row['id']?>"  ><i class='glyphicon glyphicon-trash'></i> Eliminar</button>
					</td>
				</tr>
				<?php
			}
			?>
			</tbody>
		</table>
		<div class="table-pagination pull-right">
			<?php echo paginate($reload, $page, $total_pages, $adjacents);?>
		</div>


			<?php


		} else {
			?>
			<div class="alert alert-warning alert-dismissable">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <h4>Aviso!!!</h4> No hay datos para mostrar
            </div>
			<?php
		}
	}
?>

pagination.php

Contiene un función para paginar los resultados de búsqueda. Este archivo es llamado desde  el archivo paises_ajax.php

<?php


function paginate($reload, $page, $tpages, $adjacents) {
	$prevlabel = "&lsaquo; Anterior";
	$nextlabel = "Siguiente &rsaquo;";
	$out = '<ul class="pagination pagination-large">';


	// previous label


	if($page==1) {
		$out.= "<li class='disabled'><span><a>$prevlabel</a></span></li>";
	} else if($page==2) {
		$out.= "<li><span><a href='javascript:void(0);' onclick='load(1)'>$prevlabel</a></span></li>";
	}else {
		$out.= "<li><span><a href='javascript:void(0);' onclick='load(".($page-1).")'>$prevlabel</a></span></li>";


	}


	// first label
	if($page>($adjacents+1)) {
		$out.= "<li><a href='javascript:void(0);' onclick='load(1)'>1</a></li>";
	}
	// interval
	if($page>($adjacents+2)) {
		$out.= "<li><a>...</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'><a>$i</a></li>";
		}else if($i==1) {
			$out.= "<li><a href='javascript:void(0);' onclick='load(1)'>$i</a></li>";
		}else {
			$out.= "<li><a href='javascript:void(0);' onclick='load(".$i.")'>$i</a></li>";
		}
	}


	// interval


	if($page<($tpages-$adjacents-1)) {
		$out.= "<li><a>...</a></li>";
	}


	// last


	if($page<($tpages-$adjacents)) {
		$out.= "<li><a href='javascript:void(0);' onclick='load($tpages)'>$tpages</a></li>";
	}


	// next


	if($page<$tpages) {
		$out.= "<li><span><a href='javascript:void(0);' onclick='load(".($page+1).")'>$nextlabel</a></span></li>";
	}else {
		$out.= "<li class='disabled'><span><a>$nextlabel</a></span></li>";
	}


	$out.= "</ul>";
	return $out;
}
?>

agregar.php

Este archivo de encarga de agregar un registro a la base de datos el cual recibe los datos mediante AJAX desde la ventana modal.

<?php
/*-----------------------
Autor: Obed Alvarado
http://www.obedalvarado.pw
Fecha: 27-02-2016
Version de PHP: 5.6.3
----------------------------*/
	# conectare la base de datos
    $con=@mysqli_connect('localhost', 'root', '', 'test_modal');
    if(!$con){
        die("imposible conectarse: ".mysqli_error($con));
    }
    if (@mysqli_connect_errno()) {
        die("Connect failed: ".mysqli_connect_errno()." : ". mysqli_connect_error());
    }
	/*Inicia validacion del lado del servidor*/
	 if (empty($_POST['codigo'])){
			$errors[] = "Código vacío";
		} else if (empty($_POST['nombre'])){
			$errors[] = "Nombre vacío";
		} else if (empty($_POST['moneda'])){
			$errors[] = "Moneda vacío";
		} else if (empty($_POST['capital'])){
			$errors[] = "Capital vacío";
		} else if (empty($_POST['continente'])){
			$errors[] = "Continente vacío";
		}   else if (
			!empty($_POST['codigo']) && 
			!empty($_POST['nombre']) &&
			!empty($_POST['moneda']) &&
			!empty($_POST['capital']) &&
			!empty($_POST['continente'])


		){


		// escaping, additionally removing everything that could be (html/javascript-) code
		$codigo=mysqli_real_escape_string($con,(strip_tags($_POST["codigo"],ENT_QUOTES)));
		$nombre=mysqli_real_escape_string($con,(strip_tags($_POST["nombre"],ENT_QUOTES)));
		$moneda=mysqli_real_escape_string($con,(strip_tags($_POST["moneda"],ENT_QUOTES)));
		$capital=mysqli_real_escape_string($con,(strip_tags($_POST["capital"],ENT_QUOTES)));
		$continente=mysqli_real_escape_string($con,(strip_tags($_POST["continente"],ENT_QUOTES)));


		$sql="INSERT INTO countries (countryCode, countryName, 	currencyCode, capital, continentName) VALUES ('".$codigo."','".$nombre."','".$moneda."', '".$capital."','".$continente."'	)";
		$query_update = mysqli_query($con,$sql);
			if ($query_update){
				$messages[] = "Los datos han sido guardados satisfactoriamente.";
			} else{
				$errors []= "Lo siento algo ha salido mal intenta nuevamente.".mysqli_error($con);
			}
		} else {
			$errors []= "Error desconocido.";
		}


		if (isset($errors)){


			?>
			<div class="alert alert-danger" role="alert">
				<button type="button" class="close" data-dismiss="alert">&times;</button>
					<strong>Error!</strong> 
					<?php
						foreach ($errors as $error) {
								echo $error;
							}
						?>
			</div>
			<?php
			}
			if (isset($messages)){


				?>
				<div class="alert alert-success" role="alert">
						<button type="button" class="close" data-dismiss="alert">&times;</button>
						<strong>¡Bien hecho!</strong>
						<?php
							foreach ($messages as $message) {
									echo $message;
								}
							?>
				</div>
				<?php
			}


?>

modificar.php

Este archivo de encarga de modificar los datos, el cual recibe los datos mediante AJAX desde una ventana modal.

<?php
/*-----------------------
Autor: Obed Alvarado
http://www.obedalvarado.pw
Fecha: 27-02-2016
Version de PHP: 5.6.3
----------------------------*/
	# conectare la base de datos
    $con=@mysqli_connect('localhost', 'root', '', 'test_modal');
    if(!$con){
        die("imposible conectarse: ".mysqli_error($con));
    }
    if (@mysqli_connect_errno()) {
        die("Connect failed: ".mysqli_connect_errno()." : ". mysqli_connect_error());
    }
	/*Inicia validacion del lado del servidor*/
	if (empty($_POST['id'])) {
           $errors[] = "ID vacío";
        } else if (empty($_POST['codigo'])){
			$errors[] = "Código vacío";
		} else if (empty($_POST['nombre'])){
			$errors[] = "Nombre vacío";
		} else if (empty($_POST['moneda'])){
			$errors[] = "Moneda vacío";
		} else if (empty($_POST['capital'])){
			$errors[] = "Capital vacío";
		} else if (empty($_POST['continente'])){
			$errors[] = "Continente vacío";
		}   else if (
			!empty($_POST['id']) &&
			!empty($_POST['codigo']) && 
			!empty($_POST['nombre']) &&
			!empty($_POST['moneda']) &&
			!empty($_POST['capital']) &&
			!empty($_POST['continente'])


		){


		// escaping, additionally removing everything that could be (html/javascript-) code
		$codigo=mysqli_real_escape_string($con,(strip_tags($_POST["codigo"],ENT_QUOTES)));
		$nombre=mysqli_real_escape_string($con,(strip_tags($_POST["nombre"],ENT_QUOTES)));
		$moneda=mysqli_real_escape_string($con,(strip_tags($_POST["moneda"],ENT_QUOTES)));
		$capital=mysqli_real_escape_string($con,(strip_tags($_POST["capital"],ENT_QUOTES)));
		$continente=mysqli_real_escape_string($con,(strip_tags($_POST["continente"],ENT_QUOTES)));
		$id=intval($_POST['id']);
		$sql="UPDATE countries SET  countryCode='".$codigo."', countryName='".$nombre."',
		currencyCode='".$moneda."', capital='".$capital."', continentName='".$continente."'	WHERE id='".$id."'";
		$query_update = mysqli_query($con,$sql);
			if ($query_update){
				$messages[] = "Los datos han sido actualizados satisfactoriamente.";
			} else{
				$errors []= "Lo siento algo ha salido mal intenta nuevamente.".mysqli_error($con);
			}
		} else {
			$errors []= "Error desconocido.";
		}


		if (isset($errors)){


			?>
			<div class="alert alert-danger" role="alert">
				<button type="button" class="close" data-dismiss="alert">&times;</button>
					<strong>Error!</strong> 
					<?php
						foreach ($errors as $error) {
								echo $error;
							}
						?>
			</div>
			<?php
			}
			if (isset($messages)){


				?>
				<div class="alert alert-success" role="alert">
						<button type="button" class="close" data-dismiss="alert">&times;</button>
						<strong>¡Bien hecho!</strong>
						<?php
							foreach ($messages as $message) {
									echo $message;
								}
							?>
				</div>
				<?php
			}


?>

eliminar.php

Este archivo contiene las instruciones necesarias para borrar un registro de nuestra base de datos

<?php
/*-----------------------
Autor: Obed Alvarado
http://www.obedalvarado.pw
Fecha: 27-02-2016
Version de PHP: 5.6.3
----------------------------*/
	# conectare la base de datos
    $con=@mysqli_connect('localhost', 'root', '', 'test_modal');
    if(!$con){
        die("imposible conectarse: ".mysqli_error($con));
    }
    if (@mysqli_connect_errno()) {
        die("Connect failed: ".mysqli_connect_errno()." : ". mysqli_connect_error());
    }
	/*Inicia validacion del lado del servidor*/
	 if (empty($_POST['id_pais'])){
			$errors[] = "ID vacío";
		}   else if (
			!empty($_POST['id_pais']) 


		){


		// escaping, additionally removing everything that could be (html/javascript-) code
		$id_pais=intval($_POST['id_pais']);


		$sql="DELETE FROM countries WHERE id='".$id_pais."'";
		$query_delete = mysqli_query($con,$sql);
			if ($query_delete){
				$messages[] = "Los datos han sido eliminados satisfactoriamente.";
			} else{
				$errors []= "Lo siento algo ha salido mal intenta nuevamente.".mysqli_error($con);
			}
		} else {
			$errors []= "Error desconocido.";
		}


		if (isset($errors)){


			?>
			<div class="alert alert-danger" role="alert">
				<button type="button" class="close" data-dismiss="alert">&times;</button>
					<strong>Error!</strong> 
					<?php
						foreach ($errors as $error) {
								echo $error;
							}
						?>
			</div>
			<?php
			}
			if (isset($messages)){


				?>
				<div class="alert alert-success" role="alert">
						<button type="button" class="close" data-dismiss="alert">&times;</button>
						<strong>¡Bien hecho!</strong>
						<?php
							foreach ($messages as $message) {
									echo $message;
								}
							?>
				</div>
				<?php
			}


?>

[caption id="" align="aligncenter" width="819"] Sistema de control de inventario[/caption]

Bien esto sería todo lo que respecta a el envío de datos dinámicamente a una ventana modal con bootstrap, PHP, MySQL y jQuery. Puedes echar un vistazo a la demostración de este tutorial o si deseas descargar los archivos utilizados para este tutorial y hacer las pruebas tu mismo sigue los enlaces siguientes:

Ver demostración Descargar

Obed Alvarado

Sobre el autor

Artículo redactado por Obed Alvarado. Comparto experiencias prácticas sobre PHP, MySQL, aplicaciones web, instalación en hosting y herramientas para negocios.

También te puede interesar

Comentarios