Layui? ??? ?? ? ??? ??? ??? ??????

Layui? ???? ??? ??? ??? ?????? ???? ??? ?????. ?? ? ???? ? ?? ? ??? ??? ????? ?? ?? ??? ??? ? ????. ? ??? ??? ?? table.render() ??? ?? ?? ??.

???? : Layui? ????? CSS? ?????. ??? CSS ??? ???? ?? LAYUI ??? ???? ????? ?? ???? ??? ? ????. ?? ??, ??? ??? ??? ?? ???? ?? ? ?? ???, ?? ??, ??? ??? ?? ???? ?? ??? ???? ?? ? ? ????. Layui? ?? ???? ???? ???? ??? ??? ???? ??? ? ????.

?? : ??? ??? ??? ?? ?????. ?? ?? ???? ??, ? ?? ?? ??, ? ?? ???? ??? ?? (? : ???, ??, ??) ? ? ??? ?? ??? ??? ?? ??? ?? ? ? ????. table.render() ???. ?? ??, cols ??? ???? ?? ??? ??, ??, ?? ? ??? ?? ??? ????? ?? ?? ? ? ????. page ??? ??? ?? ??? ???? ???? limit ??? ??? ? ? ?? ?????. done ?? ??? ???? ???? ??? ? ? ??? ??? ??? ?? ????? ??? ?????.

Layui ??? ?? ??? ?? ???? ??? ?? ? ? ?????

?, LAYUI ??? ?? ??? ?? ?? ?? ??? ?? ? ? ????. ????? table.render() ??? toolbar ??? ????? ???? ??? ? ? DOM? ???? ?????.

toolbar ?? ?? : ? ??? ???? ? ?? ??? ?? ? ???? ?? ? ? ????. ????? ??, ?? ?? ? ??? ?? ??? ?? HTML ??? ??? ? ????. ?? ?? JavaScript? ???? ??? ??? ?? ?? ? ???? ?????. ?? ??:

 <code class="javascript">table.render({ elem: '#myTable', url: '/data', cols: [[ {field: 'id', title: 'ID'}, {field: 'name', title: 'Name'}, {toolbar: '#barDemo'} // This line adds the toolbar ]], id: 'myTableId' });</code>

??? #barDemo ? ??? ?? ??? ?? ? ??????.

 <code class="html"><script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">Edit <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">Delete </script></code>

?? ?? Layui ???? tool ???? ???? edit ? delete ???? ?????.

 <code class="javascript">layui.table.on('tool(myTableId)', function(obj){ var data = obj.data; if(obj.event === 'edit'){ // Edit logic here } else if(obj.event === 'delete'){ // Delete logic here } });</code>

DOM ?? : ?? JavaScript ? DOM ??? ???? ???? ??? ? ? ??? ?? ?? ??? ?? ? ? ????. ? ?? ???? ????? ? ?? ?? ??? ?????. ???? ???? ??? ??? ?? ???? ? ?? ??? ?? ??? ?????.

Layui ???? ?? ??? ???? ????? ?????????

Layui ???? ??? ??? ??? ???? ????? ???????. ?? table.render() ??? ?? url ?????. ? ??? ???? JSON ???? ???? ??? API ?? ???? URL? ?????.

JSON ??? ?? : ??? API? Layui? ??? ??? JSON ???? ???? ???????. ????? ???? ?? ??? ?? ? data ????? ??? ???? ? ??? ???? ?? ?????. ? ??? ?? ??? ??? ???? field ??? ?????. ?? ??:

 <code class="json">{ "code": 0, //optional, success code "msg": "", //optional, success message "count": 100, //optional, total number of records "data": [ {"id": 1, "name": "John Doe", "age": 30}, {"id": 2, "name": "Jane Smith", "age": 25} ] }</code>

url ?? ?? : JavaScript ???? ??? API? ???? url ??? ?????.

 <code class="javascript">table.render({ elem: '#myTable', url: '/api/getData', // Your backend API endpoint cols: [[ {field: 'id', title: 'ID'}, {field: 'name', title: 'Name'}, {field: 'age', title: 'Age'} ]] });</code>

?? ?? Layui?? URL? Ajax ????? ???? ?? ? ?? ?? ?? ???? ? ???. ??? API? ??? ???? ?? JSON ???? ???? ????? ???? ???? ??? ??????. ??? ? ???? ?? ?? API ??? ???? ?? ?? ??? ???????.

Layui ????? Pagination ? ??? ????? ?????????

Layui? ??? ?? ? ??? ?? ?? ??? ?????. table.render() ?? ??? ???? ??? ??? ????? ??? ?? ? ? ????.

Pagination : page ??? true ? ???? Pagination? ??????. limit (??? ? ?), limits (??? ? ?? ??? ?? ??) ? layout (?? ??? ?? ??? ???? ???)? ?? ??? ???? ??? ??? ??? ??? ?? ? ? ????.

 <code class="javascript">table.render({ elem: '#myTable', url: '/api/getData', page: true, // Enables pagination limit: 10, // 10 rows per page limits: [10, 20, 30], // Options for rows per page layout: ['prev', 'page', 'next', 'limit', 'skip'] // Customize pagination elements });</code>

?? : layui? ? ???? sort ??? ???? ?? ????? ????? ? ??? ?????. ?? ? ??? ?? ??? API? ?? ??? ???????. ???? ?? ??? ? ??? ???? Layui? url ??? ??? URL? ?? ?? ?? (? : sort ? order )? ?????. ??? API? ??? ?? ??? ???? ?? ? ???? ?? ?? ???????.

 <code class="javascript">table.render({ elem: '#myTable', url: '/api/getData', cols: [[ {field: 'id', title: 'ID', sort: true}, // Enables sorting for this column {field: 'name', title: 'Name', sort: true} ]] });</code>

??? ?? ? ? Layui? ?? sort ? order ?? ??? ????? ??? API? ???????. ????? ??? ???? ???? ???? ?????.

? ??? Layui? ??? ?? ? ??? ??? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!