Bootstrap-table CRUD

1. introduced js bootstarp-table-based class / css document

    @*1、Jquery组件引用*@
    <script src="~/Scripts/jquery-1.10.2.js"></script>

    @*2、bootstrap组件引用*@
    <script src="~/Content/bootstrap/bootstrap.js"></script>
    <link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" />
    
    @*3、bootstrap table组件以及中文包的引用*@
    <script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
    <link href="~/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
    <script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

2. Define an empty table

<table id="madArea_table"></table>

3. js on the table initialization

$ (function () { 
  //. 1 initializes the Table. 
  var pilotable new new TableInit = (); 
  oTable.Init (); 
} 
var TableInit = function () { 
  var = oTableInit new new Object (); 
  // initialize the Table 
  oTableInit.Init = function () { 
    $ ( '# madArea_table') bootstrapTable ( 'the destroy');. 
    $ ( '# madArea_table') bootstrapTable ({. 
      URL: path, 
      Method: 'POST', // request method 
      sortName: "createTime", 
      the sortOrder: "desc", 
      Striped: to true, // whether color line interval 
      pagination: true, // whether the tab 
      Search: to false, 
      showExport: to false, 
      queryParams: queryParams, // passing parameters (*) 
      Columns: [{
        CheckBox: to true true
      },
        { 
          title: 'number', // do not add the title 
          align = left: "Center", 
          Formatter: function (value, Row, index) { 
            return index +. 1; 
          } 
        }, 
        { 
          Field: 'name', 
          title: ' name ' 
        }, 
        { 
          Field:' Area ', 
          title:' division ' 
        }, 
        { 
          Field:' Code ', 
          title:' Code ' 
        }, 
        { 
          Field:' createTime ', 
          title:' created ', 
          the sortable:true
        }]
    }); 
  }; 

  return oTableInit; 
};

// get a parameter query 
function queryParams (the params) { 
  var = {// TEMP variable name and the name of the controller key must have been here, the side change, the same controller may also need to change 
    pageNum: Math.round ((params.offset + params.limit) / params.limit), 
    pageSize: params.limit, 
    // name 
    name: $ ( "# input_name") Val (),. 
    // divided 
    area: $ ( "# input_area" ) .val (), 
  }; 
  return TEMP; 
}