diff --git a/apps/static/css/jumpserver.css b/apps/static/css/jumpserver.css
index da3354188..c3459298f 100644
--- a/apps/static/css/jumpserver.css
+++ b/apps/static/css/jumpserver.css
@@ -78,4 +78,25 @@ th a {
   border-top: none !important;
 }
 
+table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
+    background-color: #1ab394;
+}
+table.dataTable tbody tr.selected a,
+table.dataTable tbody th.selected a,
+table.dataTable tbody td.selected a,
+table.dataTable tbody tr.selected td i.text-navy,
+table.dataTable tbody th.selected td i.text-navy,
+table.dataTable tbody td.selected td i.text-navy
+{
+    color: white;
+}
 
+
+div.dataTables_wrapper div.dataTables_filter,
+.dataTables_length {
+    float: right !important;
+}
+
+div.dataTables_wrapper div.dataTables_filter {
+  margin-left: 15px;
+}
diff --git a/apps/static/js/jumpserver.js b/apps/static/js/jumpserver.js
index 9f664fb51..9a26a5607 100644
--- a/apps/static/js/jumpserver.js
+++ b/apps/static/js/jumpserver.js
@@ -240,7 +240,6 @@ function objectDelete(obj, name, url){
     });
 }
 
-var jumpserver = {};
 $.fn.serializeObject = function()
 {
     var o = {};
@@ -257,3 +256,80 @@ $.fn.serializeObject = function()
     });
     return o;
 };
+var jumpserver = {};
+jumpserver.initDataTable = function (options) {
+  // options = {
+  //    ele *: $('#dataTable_id'),
+  //    ajax_url *: '{% url 'users:user-list-api' %}',
+  //    columns *: [{data: ''}, ....],
+  //    dom: 'fltip',
+  //    i18n_url: '{% static "js/...../en-us.json" %}',
+  //    order: [[1, 'asc'], [2, 'asc'], ...],
+  //    buttons: ['excel', 'pdf', 'print'],
+  //    columnDefs: [{target: 0, createdCell: ()=>{}}, ...],
+  //    uc_html: '<a>header button</a>',
+  //    op_html: 'div.btn-group?'
+  // }
+  var ele = options.ele || $('.dataTable');
+  var columnDefs = [
+    {
+      targets: 0, orderable: false,
+      createdCell: function(td) {
+        $(td).html('<div class="checkbox checkbox-default"><input type="checkbox" class="ipt_check"><label></label></div>');
+      }
+    },
+    {className: 'text-center', targets: '_all'},
+  ];
+  columnDefs = options.columnDefs ? options.columnDefs.concat(columnDefs) : columnDefs;
+  var table = ele.DataTable({
+        pageLength: options.pageLength || 25,
+        dom: options.dom || '<"#uc.pull-left"><"html5buttons"B>flti<"row m-t"<"#op.col-md-6"><"col-md-6"p>>',
+        language: {
+            url: options.i18n_url || "/static/js/plugins/dataTables/i18n/zh-hans.json"
+        },
+        order: options.order || [[ 1, 'asc' ]],
+        buttons: options.buttons || [
+            {extend: 'excel',
+                exportOptions: {
+                    modifier: {
+                        selected: true
+                    }
+                }
+            },
+            {extend: 'pdf',
+                exportOptions: {
+                    modifier: {
+                        selected: true
+                    }
+                }
+            },
+            {extend: 'print',
+                customize: function (win){
+                    $(win.document.body).addClass('white-bg');
+                    $(win.document.body).css('font-size', '10px');
+                    $(win.document.body).find('table')
+                        .addClass('compact')
+                        .css('font-size', 'inherit');
+                }
+            }
+        ],
+        columnDefs: columnDefs,
+        select: options.select || {style: 'multi'},
+        ajax: {
+            url: options.ajax_url ,
+            dataSrc: ""
+        },
+        columns: options.columns || []
+    });
+    table.on('select', function(e, dt, type, indexes) {
+        var $node = table[ type ]( indexes ).nodes().to$();
+        $node.find('input.ipt_check').prop('checked', true);
+    }).on('deselect', function(e, dt, type, indexes) {
+        var $node = table[ type ]( indexes ).nodes().to$();
+        $node.find('input.ipt_check').prop('checked', false);
+    }).on('draw', function(){
+        $('#op').html(options.op_html || '');
+        $('#uc').html(options.uc_html || '');
+    });
+    return table;
+}
diff --git a/apps/templates/_head_css_js.html b/apps/templates/_head_css_js.html
index 0fc1ac92c..4bb984ae3 100644
--- a/apps/templates/_head_css_js.html
+++ b/apps/templates/_head_css_js.html
@@ -7,17 +7,9 @@
 <link href="{% static "css/plugins/sweetalert/sweetalert.css" %}" rel="stylesheet">
 <link href="{% static "css/style.css" %}" rel="stylesheet">
 <link href="{% static "css/plugins/vaildator/jquery.validator.css" %}" rel="stylesheet">
-
-
-
 <!-- scripts -->
 <script src="{% static 'js/jquery-2.1.1.js' %}"></script>
 
-
 <!-- Sweet alert -->
 <script src="{% static 'js/plugins/sweetalert/sweetalert.min.js' %}"></script>
-
 <script src="{% static 'js/bootstrap.min.js' %}"></script>
-
-
-
diff --git a/apps/users/templates/users/user_list.html b/apps/users/templates/users/user_list.html
index a1369ee73..d712a28bc 100644
--- a/apps/users/templates/users/user_list.html
+++ b/apps/users/templates/users/user_list.html
@@ -2,16 +2,14 @@
 {% load i18n static %}
 {% get_current_language as LANGUAGE_CODE %}
 {% load common_tags %}
-{% block content_left_head %}
-    <a href="{% url 'users:user-create' %}" class="btn btn-sm btn-primary "> {% trans "Create user" %} </a>
-{% endblock %}
 {% block table_search %}{% endblock %}
 {% block table_container %}
+<div class="uc pull-left"><a href="{% url "users:user-create" %}" class="btn btn-sm btn-primary"> {% trans "Create user" %} </a></div>
 <table class="table table-striped table-bordered table-hover " id="user_list_table" >
     <thead>
         <tr>
             <th class="text-center">
-                <div class="checkbox checkbox-success"><input id="" type="checkbox" class="ipt_check_all"><label></label></div>
+                <div class="checkbox checkbox-default"><input id="" type="checkbox" class="ipt_check_all"><label></label></div>
             </th>
             <th class="text-center">{% trans 'Name' %}</a></th>
             <th class="text-center">{% trans 'Username' %}</a></th>
@@ -25,66 +23,43 @@
     <tbody>
     </tbody>
 </table>
+<div id="actions" class="hide">
+    <div class="input-group">
+        <select class="form-control m-b" style="width: auto" id="slct_bulk_update">
+            <option value="delete">{% trans 'Delete selected' %}</option>
+            <option value="update">{% trans 'Update selected' %}</option>
+            <option value="deactive">{% trans 'Deactive selected' %}</option>
+        </select>
+        <div class="input-group-btn pull-left" style="padding-left: 5px;">
+            <button id='btn_bulk_update' style="height: 32px;"  class="btn btn-sm btn-primary">
+             {% trans 'Submit' %}
+            </button>
+        </div>
+    </div>
+</div>
 {% include "users/_user_bulk_update_modal.html" %}
 {% endblock %}
 {% block content_bottom_left %}
-        <div class="input-group">
-            <select class="form-control m-b" style="width: auto" id="slct_bulk_update">
-                <option value="delete">{% trans 'Delete selected' %}</option>
-                <option value="update">{% trans 'Update selected' %}</option>
-                <option value="deactive">{% trans 'Deactive selected' %}</option>
-            </select>
-            <div class="input-group-btn pull-left" style="padding-left: 5px;">
-                <button id='btn_bulk_update' style="height: 32px;"  class="btn btn-sm btn-primary">
-                 {% trans 'Submit' %}
-                </button>
-            </div>
-        </div>
 {% endblock %}
 {% block custom_foot_js %}
 <script>
 jumpserver.checked = false;
 $(document).ready(function(){
-    var table = $('#user_list_table').DataTable({
-        dom: '<"html5buttons"B>lftip',
-        language: {
-            url: "{% static 'js/plugins/dataTables/i18n/language_code.json' %}".replace('language_code', '{{ LANGUAGE_CODE }}')
-        },
-        order: [[ 1, 'asc' ]],
-        buttons: [
-            {extend: 'excel',
-                exportOptions: {
-                    modifier: {
-                        selected: true
-                    }
-                }
-            },
-            {extend: 'pdf',
-                exportOptions: {
-                    modifier: {
-                        selected: true
-                    }
-                }
-            },
-            {extend: 'print',
-                customize: function (win){
-                    $(win.document.body).addClass('white-bg');
-                    $(win.document.body).css('font-size', '10px');
-                    $(win.document.body).find('table')
-                        .addClass('compact')
-                        .css('font-size', 'inherit');
-                }
-            }
-        ],
+    var options = {
+        ele: $('#user_list_table'),
         columnDefs: [
-            {targets: 0, orderable: false,
-             createdCell: function(td) {
-                $(td).html('<div class="checkbox checkbox-success"><input type="checkbox" class="ipt_check"><label></label></div>');
-             }
-            },
-            {className: 'text-center', targets: [0, 1, 2, 3, 4, 5, 6, 7]},
-            {targets: 7,
-             createdCell: function (td, cellData, rowData) {
+            {targets: 1, createdCell: function (td, cellData, rowData) {
+                var detail_btn = '<a href="{% url "users:user-detail" pk=99991937 %}">' + cellData + '</a>';
+                $(td).html(detail_btn.replace('99991937', rowData.id));
+             }},
+            {targets: 6, createdCell: function (td, cellData) {
+                if (!cellData) {
+                    $(td).html('<i class="fa fa-times text-danger"></i>')
+                } else {
+                    $(td).html('<i class="fa fa-check text-navy"></i>')
+                }
+             }},
+            {targets: 7, createdCell: function (td, cellData, rowData) {
                 var update_btn = '<a href="{% url "users:user-update" pk=99991937 %}" class="btn btn-xs btn-info">{% trans "Update" %}</a>'.replace('99991937', cellData);
                 var del_btn = '<a class="btn btn-xs btn-danger m-l-xs btn_user_delete" data-uid="99991937">{% trans "Delete" %}</a>'.replace('99991937', cellData);
                 if (rowData.id === 1) {
@@ -92,47 +67,13 @@ $(document).ready(function(){
                 } else {
                     $(td).html(update_btn + del_btn)
                 }
-             }
-            },
-            {targets: 6,
-             createdCell: function (td, cellData) {
-                if (!cellData) {
-                    $(td).html('<i class="fa fa-times text-danger"></i>')
-                } else {
-                    $(td).html('<i class="fa fa-check text-navy"></i>')
-                }
-             }
-            },
-            {targets: 2,
-             createdCell: function (td, cellData, rowData) {
-                var detail_btn = '<a href="{% url "users:user-detail" pk=99991937 %}">' + cellData + '</a>';
-                $(td).html(detail_btn.replace('99991937', rowData.id));
-             }
-            }
-        ],
-        select: {style: 'multi'},
-        ajax: {
-            url: '{% url "users:user-bulk-update-api" %}',
-            dataSrc: ""
-        },
-        columns: [
-            {data: function(){return ""} },
-            {data: "name" },
-            {data: "username" },
-            {data: "get_role_display" },
-            {data: "group_display" },
-            {data: function(){return 999} },
-            {data: "active_display" },
-            {data: "id" }
-        ]
-    });
-    table.on('select', function(e, dt, type, indexes) {
-        var $node = table[ type ]( indexes ).nodes().to$();
-        $node.find('input.ipt_check').prop('checked', true);
-    }).on('deselect', function(e, dt, type, indexes) {
-        var $node = table[ type ]( indexes ).nodes().to$();
-        $node.find('input.ipt_check').prop('checked', false);
-    });
+             }}],
+        ajax_url: '{% url "users:user-bulk-update-api" %}',
+        columns: [{data: function(){return ""}}, {data: "username" }, {data: "name" }, {data: "get_role_display" }, {data: "group_display" },
+                  {data: function(){return 999}}, {data: "active_display" }, {data: "id" }],
+        op_html: $('#actions').html()
+    };
+    jumpserver.initDataTable(options);
 }).on('click', '#btn_bulk_update', function(){
     var action = $('#slct_bulk_update').val();
     var $data_table = $('#user_list_table').DataTable()