Bootstrap Table Server Side With Coldfusion

Bootstrap Table Server Side With Coldfusion Component. Bootstrap Table is licensed under the The MIT License.

<!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">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Meessage Broadcast Admin</title>
        <!-- Bootstrap core CSS -->
        <link href="../public/css/bootstrap.min.css" rel="stylesheet">
        <link href="../public/css/bootstrap-table.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script type="text/javascript" src="../public/js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../public/js/bootstrap-table.js"></script>
  </head>
 

<div class="container"><br />
    <div class="row">
        <div class="page-header">
           <h1>Users</h1>
        </div>
        <div id="Error" class="text-danger"></div>
        <div class="col-sm-12 col-md-12 col-lg-12">
            <table id="users" data-height="400" data-side-pagination="server"
               data-pagination="true" data-search="true" data-toolbar="#Error">
            </table>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(e) {
    $('#users').bootstrapTable({
            method: 'get',
            url: 'cfc/users.cfc?method=getUsers',
            cache: false,
            height: 400,
            striped: true,
            pagination: true,
            pageSize: 10,
            pageList: [10, 25, 50, 100, 200],
            search: true,
            /*showColumns: true,*/
            showRefresh: true,
            minimumCountColumns: 2,
            clickToSelect: true,
            columns: [
          {field: 'Count',title: 'SNO',align: 'right',
            valign: 'bottom',sortable: false},
          {field: 'userid',title: 'Client ID',visible:false},
          {field: 'clientName',title: 'Client Name',align: 'center',
            valign: 'middle',sortable: true},
          {field: 'userName',title: 'User Name',align: 'left',
            valign: 'top',sortable: true},
          {field: 'operate',title: 'Actions',align: 'center',valign: 'middle',
          clickToSelect: false,formatter: operateFormatter,events: operateEvents}]
        });
    });
   
    function operateFormatter(value, row, index) {
        return [
            '<a class="edit ml10" href="javascript:void(0)" title="Edit">',
                '<i class="glyphicon glyphicon-edit"></i>',
            '</a>&nbsp;',
            '<a class="remove ml10" href="javascript:void(0)" title="Remove">',
                '<i class="glyphicon glyphicon-remove"></i>',
            '</a>'
        ].join('');
    }
   
    window.operateEvents = {
        'click .edit': function (e, value, row, index) {
            console.log(row);
        },
        'click .remove': function (e, value, row, index) {
            $.getJSON('cfc/users.cfc?method=deleteReport&returnformat=json
              &queryformat=column&_cf_nodebug=true
              &_cf_nocache=true&ReportID='+row.id_int,
            function(d)
            {
                $('#Error).text(d.MESSAGE);
                $('#users').bootstrapTable('refresh');
            });       
        }
    };   
</script>

More Details Visit  :
https://www.elearn99.com/programming/bootstrap-table-server-side-coldfusion/240/


Comments

Post a Comment

Popular posts from this blog

Login with facebook using coldfusion

Image
Here is a example. How to make facebooklogin for a website using coldfusion?. Before start you make a account with facebook. Step 1 :  Create a app for your website using facebooklogin.here you can get app_key and secret_key. Step 2: Step 4:  You can see this screen :   Step 5:   After filling UserName and Password a screen show like this...    After click ok the redirect to logininformation:- Output in logininformation.cfm  I hope this is useful for you. if you are facing any problem write us in comment. we are happy to solve that problem.   For more details visit these links : -   http://developers.facebook.com/docs/facebook-login/   //Permissions   http://developers.facebook.com/docs/reference/login/   https://developers.facebook.com/docs/reference/api/user/
Read more

Create CSV file in Coldfusion Using CFFile

Create CSV file in Coldfusion Using CFFile <cfquery name="GetUsers" datasource="TestDB">     SELECT UserID, UserName, Password,Active,     CASE Active         WHEN 1 THEN 'Active'         WHEN 0 THEN 'InActive'         END AS Status     FROM shema_users        </cfquery> <cfset HeaderColumn = "UserID,UserName,Password,Status"> <CFSET FileOutputPath = "C:\ColdFusion10\cfusion\wwwroot\Test\uploads">                            <CFFILE ACTION="Write" FILE="#FileOutputPath#\Users.csv" OUTPUT="#HeaderColumn#" nameconflict="overwrite" addnewline="yes">                     <cfloop query=...
Read more

Get Previous One Day Data in Sql Server

Get Previous One Day Data in Sql Server using convert(), dateadd(), datediff() and getdate() sql functions and between operator. SELECT OrderID , CustomerID , OrderDateTime FROM [ DEMODB ] . [ dbo ] . [ Orders ] WHERE OrderDateTime   BETWEEN CONVERT ( VARCHAR ( 10 ) ,   DATEADD ( DAY , DATEDIFF ( DAY , 0 , GETDATE ( ) ) , - 1 ) , 101 ) + ' ' + '00:00:00' AND CONVERT ( VARCHAR ( 10 ) ,   DATEADD ( DAY , DATEDIFF ( DAY , 0 , GETDATE ( ) ) , - 1 ) , 101 ) + ' ' + '23:59:59'
Read more