Ajax JQuery Pagination in Codeigniter using Bootstrap

hello friends this is one more video tutorial and code igniter in this video we have make discussion on how to make pagination and code igniter by using code igniter pagination library with Ajax query and bootstrap in this video tutorial we will use Ajax query and boots with code igniter pagination library to create simple pagination which load next page data without refreshing of web page implementation of code igniter pagination mode Ajax query is very difficult but we will simplified it now let's start learning this topic this is our testing database and in this we have one table countries with table column like head sort name country name and phone code in this table we have already inserted whole world country data so we will use this table data to implement code the ignitor pagination with ajax query first we have make database connection with our code igniter application so we have config folder and in this we have Gil 2 database dot PHP file in this file we have inserted value of health's name set the locale lost username set to root password set to blank and database name set to testing this way we have made database connection after making database connection now have defined base URL for this code igniter application so we have go to config folder and in this folder we have open config dot PHP file and in this file we have defined the space URL for this application after defining base URL of this application first we have create one controller with named Ajax pagination in our controller folder and in this controller we have make one index function so when we have called this controller this index function will be called under this function index function we want the load views file on which we want to display pagination so we have write dollar this with loader class library object load with view method under this method we have write ajax pagination which is of you file which we want to load when this controller has been called now we have go views and in which we have already created Ajax pagination view file under this file we have include JavaScript query library and bootstrap framework we will use functionality of both the library into this page for making pagination on this page first we have defined one division tag with attribute it is equal to pagination link under this tag we will display pagination page link number below this tag we have defined one another division tag with attribute class is equal to table responsive and AB is equal to country table under this tag we will display country data in table format now we have moved to write query code so in this first we have defined one functional country data with page argument this function will fetch a particular page country data with pagination link which we will display on above tag under this function we have defined Ajax request and in this request first we have write URL option and in this we have write to echo statement with base URL function which returns base URL which we have defined and config folder config file then after we have write controller name Ajax pagination slash pagination function slash page argument we have send requested to this link in seconds option we have right method in this option we can define which method we have used for sending data to server here we have used get method for send form data to server in this option we have write data type this option define in which format you want to receive data of from server we have used JSON format in which we want to receive data from server lastly in Ajax request we have write success callback function this function has been called if request successfully completed and dysfunction will receive data from server this function received country data in table format and pagination link data from server so first we have write dollar with division tag in country table with HTML method under this method we have write data dot country table this code will display country data and table format in this division tag and here country table is a JSON array then after we have write dollar with division target pagination link with HTML method and under this method we have write data dot pagination link this will display pagination link on to this division tag now we have moved to Ajax pagination controller and under this we have write one function pagination this function name has been we have defined under Ajax request this function will fetch data from table and make pagination link also by using code ignitor pagination library under this function first we have write dollar this with loader class library object load with model method and under this method we have write model name Ajax pagination model this method will load this model under this function we will create this model later after this we want the load pagination library under this function so we have write dollar this with loader class object load with library method under this method we have write pagination it will load pagination library under this function now we have write one dollar config variable is equal array in this variable we will define configuration for pagination library and pagination library first we want to define base URL so we have right doll or config base URL variable is equal to hashtag this is a full URL to the controller class or function containing your pagination second we want to define total rows which is number that represent total rows and the results that you are creating pagination for so here we have write dollar config total rows variable is equal to dollar this with Ajax pagination model would count all function here we have get number from Ajax pagination model count all function so first we have go models folder in which we have already created Ajax pagination model so in this we have defined one function count all this function will return number of rows from countries table under this function we have write dollar query variable is equal to dollar this with database class object DB would get method with table name countries this method will select query and return result store into dollar query variable below this we have write return statement with all a query variable with Nam rows function this function will return number of rows from query result this way we have get the total rows from pagination so we have moved to Ajax pagination controller we have a gain right dollar config per page variable is equal to ten this is the number of items you intend to sell per page here we have set ton records much displayed per page after this we have right dollar configure a segment variable is equal to three pagination library we'll get the page number from the Surrey segment here we'll get page number from surgery segment now we have right our config use page numbers property is equal to true and pagination library by default theory segment we'll use the starting index for the items you are paginating if you want to show actual page number then you have set to true after this we have right dollar config full toggles and variable is equal to open and order lift tag with attribute class is equal to pagination this class is boots trout framework we have used bootstrap framework for make pagination link this is opening tag placed on the left side of the entire result after defining full tag open now we have right dollar config with full tag closed variable is equal to closed unordered lists this is the closing tag placed on the right side of the entire result then after we have write dollar config first tag opened variable is equal to open list tag this is the opening tag for the first link for clothes first link we have right dollar config first tag clothes variable is equal to clothes list tag this is the closing tag for the first link for defined property of last link so we have right dollar config last tag open variable is equal to open list tag this is the opening tag for the last link same way for clothes tag of last link we have right dollar config last tag clothes variable is equal to clothes list tag this is the closing tag for the last link for defined property of next page link we have right dollar config next link variable is equal to greater than sign this text will display on next page link for defined property of next page open tag so we have right dollar config next tag open variable is equal to open left tag this is the opening tag of next page link same way for close tag of next page link we have right dollar config next tag close variable is equal to close list tag this is the close tag for the next page link for defined property of previous page link so we have right dollar config previous link variable is equal to less than sign this symbol will be display on previous page link for defined property of previous page open tag so we have right dollar config previous tag open variable is equal to open list tag this is the opening tag of previous page link same way for close tag of previous page link we have right dollar config previous tag close variable is equal to clothes list tag this is the close tag for the previous page link for defined property of current active page link so we have right dollar config current tag open variable is equal to open list tag with attribute class is equal to active with anchor tag with is equal to hash tag this is the opening tag for the current link same way for clothes tag of current page link so we have right dollar config current tag clothes variable is equal to clothes anchor tag with closest tag this is the close tag for the current page link now we have right dollar config number tag open variable is equal to open list tag this is the opening tag throw the digit link this is because here we have used page numbers into pagination link same way for clothes tag for number link so we have right doll or config number tag close variable is equal to close list tag this is the closing tag for the digit link lastly impatient configuration we have right doll or config number links variable is equal to 1 this property will controller the number of links you want to display under pagination link so if there is large number of data than at that time also it will display only 3 pagination link on web page by defining this property set to 1 that means that will display 1 link before and one link after selected page so we have define all possible configuration for pagination now we want to initialize pagination library so we have write dollar this with pagination class object pagination with initialize with dollar config variable this method will initialize pagination class with predefined options then after we have write one dollar page variable is equal to dollar this Lettieri with segment method with 3 this will get the page number from URL which we have sent from Ajax request to this function and it will store page number into this dollar page variable after getting page number now we want to get the number of start selecting data from table and query so we have write dollars start variable is equal to dollar page minus month into dollar config per page variable this code will get the number of start selecting of data for example suppose value of page is 1 that means this code will return 0 because 1 minus 1 into 10 which we have defined under dollar config per page variable now we have right dollar output variable is equal to arraigned under the suite of right pagination link is key with value is equal to dollar this with pagination class would create links method this methods return a pagination bar containing the generated links which we have store under this pagination link key same we have right right second key country table what value is equal to dollar this with Ajax pagination model with fetch details method with two argument like dollar config for page variable and dollar start variable this function we will define under Ajax pagination model which return country data and table format for particular page you first we have bill to Ajax pagination model and under this model we have defined fetch details function with two arguments like dollar limit and dollar start variable this function will return country data a particular page in table format under dysfunction we have first defined dollar output variable is equal to blank value in this variable we will store a country data an HTML table format then after we have write dollar this with database class object DB with select method and under this method we have starred sign this method will select all column of the table after this we have write dollar this with database class object DB with from method and under this method we have write country's table this method define table name in while making of query for define order by table column we have write dollar this with database class object DB with ordered by method and under this method we have write table column with ascending order find selection of table records we have right dollar this with database class object DB would limit method and under this method we have writes all a limit variable and dollar start variable this we have defined structure of select query and code igniter now we have write dollar query variable is equal to dollar this with database class object DB with get method this method will make select query and execute query and store result into dollar query variable after this we have write dollar output variable and in this variable we have app and HTML table with two table column light country eight and country name then after we have write for each loop with condition like dal a query variable with resolve method as dollar row variable under the sloop we have right dollar output variable and in this variable we have a bent code like open and close table row tag in between this tag we have right to open and close table data tag in between this tag we have right dollar row it objects and in second table data tag we have right dollar row name object after storing data into table now we want to close table so we have right dollar output variable and in this variable we have a pen close table variable now we want to send output of dysfunction so we have right return statement with doll or output variable now we have moved to Ajax pagination controller M here after getting countries data and table format now we want send to Ajax requests in JSON format so we have right to echo statement with JSON encode function with Dahl or output variable this function will convert data into JSON string and send to Ajax request so our code is ready now we have move Ajax pagination view file and here we have make this load country data function so we have call this function with arguments 1 this function will fetch country data and pagination link and display on web page so we have check output and browser you friends you can see that country's data and table format and above table we can see the pagination link but when we have click another page link then table data has been not changed so we want to write query code for change table data here you can see an inspect element of all pagination link here one data pagination page variable in which we can see the page number this is under pagination class with list tagging anchor tag so inch query code we have right dollar with document as selector with on method and under this method we have right-click event with pagination class with list tag with anchor tag and one event function so when we have click on pagination link then this code has been execute under this we have right preventdefault method this method will stop to redirect page to other page after we have right variable page is equal to dollar this with data method and under this method we have rights imagination page variable this method will fetch page number from this data variable and store into page variables after getting page number now we have called this load country data function with page argument so this function will fetch country data according to value of this page variable and display one country table and pagination link on web page now we have saved this code unchecked output and browser friends you can see that when have been loaded then first time country data has been display on webpage in table format and above table we can see pagination link now when we have click on second page link then it display next time country data in table format without refreshing a page so that means our code is working on how to make pagination and code enabler with Ajax query bootstrap this code has been fetch data from country table according predefined configuration for pagination library here you can see the pagination link which we have defined in configuration and pagination link you can see first page last page link previous and next page link also which we have defined in pagination configuration this video tutorial will makes Ajax code ignitor pagination simple for you if you have any query regarding this video tutorial please comment your query and comment box if you like this video tutorial please share this video with your friends or even you can also share on social media also if you want to get more update regarding our video tutorial please subscribe our YouTube channel

Channel: Webslesson

Views: 25,044

Keywords: ajax pagination in codeigniter, codeigniter ajax pagination, codeigniter ajax pagination library, ajax based pagination in codeigniter, codeigniter jquery ajax pagination, codeigniter pagination with bootstrap, pagination in codeigniter, simple ajax pagination with jquery and codeigniter, ajax pagination library codeigniter, codeigniter ajax tutorial

Id: nfDMTzmGi9Q

Length: 22min 1sec (1321 seconds)

Published: Thu Mar 16 2017